Three.js 保存camera（视角）设置到数据库，包括场景的缩放、旋转、移动等

浏览数：51 / 时间：2015年06月11日

最近在做的项目中遇到需要保存当前的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中找到