使用Three.js的.toJSON()与ObjectLoader()时丢失Mesh位置求助

这个问题我之前也碰到过，本质是Three.js的toJSON()方法默认的序列化规则导致的——它优先序列化物体的matrix矩阵，而非单独的position、rotation、scale属性。从你提供的JSON可以看到，object.matrix是单位矩阵，这说明设置position后矩阵没有被正确更新，所以序列化后位置信息没有被保存下来。下面给你两个可行的解决方案：

方案一：手动更新矩阵后再序列化 #

当你设置完position后，手动调用updateMatrix()强制更新物体的矩阵，这样toJSON()就能把包含位置信息的矩阵序列化进去，加载时ObjectLoader会自动解析矩阵还原位置。

// 设置位置后手动更新矩阵
mesh.position.set(path.x, path.y, path.z);
mesh.updateMatrix(); 

// 序列化
const jsonData = mesh.toJSON();

// 加载时正常解析
const loader = new THREE.ObjectLoader();
const loadedMesh = loader.parse(jsonData);

方案二：让toJSON()直接序列化transform属性 #

你可以给toJSON()传入配置参数{ transforms: true }，让它直接序列化position、rotation、scale这些单独的变换属性，而不是矩阵。这样生成的JSON会明确包含位置数据，加载时也能直接还原。

// 设置位置后，指定序列化transform属性
mesh.position.set(path.x, path.y, path.z);
const jsonData = mesh.toJSON({ transforms: true });

// 加载
const loader = new THREE.ObjectLoader();
const loadedMesh = loader.parse(jsonData);

此时生成的JSON的object部分会包含类似这样的字段：

"position": [358.04999999981374, -4499.83, 2521.2299999999814],
"rotation": [0, 0, 0],
"scale": [1, 1, 1]

补充说明 #

为什么之前的矩阵是单位矩阵？默认情况下matrixAutoUpdate是true，理论上改变position后矩阵会自动更新，但如果物体还没被添加到场景、或者没有触发过渲染循环（比如序列化是在渲染前执行的），自动更新可能还没触发，所以矩阵还是初始的单位状态。手动调用updateMatrix()或者使用transforms参数都能避开这个问题。

内容的提问来源于stack exchange，提问作者Gourmax