在三个JS中序列化相机状态

时间:2015-03-23 22:41:25

标签: serialization 3d three.js

在ThreeJS场景中序列化(或保存或编组)摄像机状态,然后在以后取消序列化(或加载或解组)摄像机的最佳方法是什么?

现在我正在保存相机位置,向上和(欧拉角)旋转场的x,y,z坐标。之后,我尝试通过拨打position.set()up.set()rotation.set()来恢复此摄像头,然后通过拨打updateProjectionMatrix()进行跟进。我假设序列化和非序列化时默认的欧拉角旋转顺序相同。

这是对的吗?

2 个答案:

答案 0 :(得分:7)

我建议改为存储相机的矩阵。这包括相机的整个转换,包括位置,旋转和缩放。

序列化:

const cameraState = JSON.stringify(camera.matrix.toArray());
// ... store cameraState somehow ...

反序列化:

// ... read cameraState somehow ...
camera.matrix.fromArray(JSON.parse(cameraState));
// Get back position/rotation/scale attributes
camera.matrix.decompose(camera.position, camera.quaternion, camera.scale); 

答案 1 :(得分:0)

接受的答案对我不起作用,而是我想出了以下解决方案:

  1. 保存:序列化camera.position和camera.rotation的x、y和z属性。

  2. 重新加载:反序列化上述 6 个参数。并重新分配它们,例如:

      camera.position.x = saved.position.x;
    
  3. 调用camera.updateProjectionMatrix()重新计算投影矩阵。