在 ThreeJS 中序列化相机状态答案

【问题标题】：Serializing Camera State in ThreeJS在 ThreeJS 中序列化相机状态
【发布时间】：2021-03-09 20:36:19
【问题描述】：

在 ThreeJS 场景中序列化（或保存或编组）相机状态，然后稍后取消序列化（或加载或解组）相机的最佳方法是什么？

现在我正在保存相机位置、向上和（欧拉角）旋转场的 x、y、z 坐标。后来我尝试通过调用position.set()、up.set() 和rotation.set() 来恢复这台相机，然后继续调用updateProjectionMatrix()。我假设序列化和反序列化时默认的欧拉角旋转顺序是相同的。

这对吗？

【问题讨论】：

标签： serialization 3d three.js

【解决方案1】：

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

序列化：

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);

【讨论】：

我需要将序列化的矩阵存储在数据库中，您对矩阵的近似大小有什么建议吗？

【解决方案2】：

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

要保存：序列化 camera.position 和 camera.rotation 的 x、y 和 z 属性。
要重新加载：反序列化上述 6 个参数。并重新分配它们，例如：
```
  camera.position.x = saved.position.x;
```
调用camera.updateProjectionMatrix()重新计算投影矩阵。

【讨论】：