最近在做的項目中遇到需要保存當前的3d管道視角設置的問題，用戶希望在對3d場景內的管道進行了縮放、旋轉、移動之后可以將場景當前的視角狀態保存在數據庫中，並在下次加載時讀取。 經過不斷的嘗試和研究，在同事的幫助下總算完成，下面說一下注意事項並附上實現代碼。
首先，經過測試保存視角取決於兩個部分，一個是camera這個超大的js對象，另一個就是右鍵平移執行的操作在controls中（開發中使用的是TrackballControls.js）。
先來說camera這個對象參數非常多，詳細參數不再做說明，大家可以直接參考Three.js的 camera定義部分的源碼，主要有up(相機的z坐標方向)、position（相機位置）、rotation（相機旋轉，里面又包含_quaternion）、scale（比例），除了這些之外還有matrix、matrixWorld、matrixWorldInverse、projectionMatrix這幾4×4的矩陣，另外還有far、aspect、near參數。這些因素共同決定了相機的視角。要逐個保存這些數據是一項相當繁瑣的工作，因此我們想辦法將這些對象合並成一個json字符串並在讀取時將它們反轉。
首先考慮的自然是 JSON.stringify() ，使用該方法轉字符串的時候在谷歌瀏覽器下提示 循環引用的對象（貌似是谷歌的BUG，FF下應該是正常的未測試），因此無法轉換，找了一下相關文章發現該方法可以傳遞一個自定義函數進來，避免循環對象的引用。如下所示
var tc = camera.clone();
var cache = []; var pdata = JSON.stringify(tc, function(key, value) { if (typeof value === 'object' && value !== null) { if (cache.indexOf(value) !== -1) { // Circular reference found, discard key return; } // Store value in our collection cache.push(value); } return value; }); cache = null; // Enable garbage collection
這樣就可以將camera的參數保存為一個json字符串形式從而可以保存到數據庫中。
對於平移的保存，查看TrackballControls.js文件即可找到 控制平移的參數為 controls.target 為一個THREE.Vector3的向量類型，那很輕易的就可以將其保存，如下所示我們將上面的camera和controls.target合並為一個JSON字符串並保存到數據庫中即可。
var target0 = controls.target.clone(); var ptarget = JSON.stringify(target0); pdata = '{"cam":'+pdata+',"ctrl":'+ptarget+'}';
上面的方式一般都可以想得到，關鍵是如何將這個json字符串讀取出來並完整的賦值給新的camera對象。
我們使用ajax讀取后，並將其反轉為JSON對象即 :
var r = JSON.parse(d.angleView); //d.angleView為數據庫中讀取出來的視角字符串參數 //關鍵在這里，使用jquery的extend方法合並相機參數與反轉過來的json對象，其中的camera為全局的camera對象，頁面初始化時已經定義，此處clone是新生成一個對象，因為camera的賦值均為引用賦值非直接賦值，類似傳址 var tcamera = $.extend(true, {}, camera.clone(), r.cam); var tctrl = new THREE.Vector3(r.ctrl.x,r.ctrl.y,r.ctrl.z); camera = tcamera.clone(); controls = new THREE.TrackballControls(camera, renderer.domElement); //重新為相機加載控制器 camera.updateProjectionMatrix(); //更新相機 controls.target.copy(tctrl);//更新控制器的中心點 copy方法可以在TrackballControls.js中找到
這樣 我們就完整的實現了保存相機視角的功能。