最近在做的项目中遇到需要保存当前的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中找到
这样 我们就完整的实现了保存相机视角的功能。