Three.js如何将3DObject重置为变换前的原始位置、旋转与几何体状态

原有方案失效原因 #

• Three.js 默认开启matrixAutoUpdate配置，手动拷贝的matrix会在渲染前被系统根据位置、旋转、缩放属性自动重算覆盖，手动赋值不生效
• rotation和quaternion为联动属性，重复拷贝会导致数值互相覆盖，最终和预期初始值不一致
• 全量克隆Mesh的方案会丢失事件监听、拖拽交互等非内置属性的绑定逻辑

正确实现方案 #

步骤1：初始化阶段备份初始状态 #

创建Mesh完成后立刻备份核心属性，不需要全量克隆Mesh：

// 完成Mesh创建、初始参数赋值后执行备份
mesh.userData.initialState = {
  position: mesh.position.clone(),
  rotation: mesh.rotation.clone(),
  scale: mesh.scale.clone(),
  // 若运行过程中会修改BufferGeometry，再加下一行
  geometry: mesh.geometry.clone()
}

步骤2：执行重置操作 #

需要恢复状态时直接在原Mesh上覆写备份的属性即可，不会丢失已绑定的交互、自定义属性：

const initial = mesh.userData.initialState;
// 覆写基础变换属性
mesh.position.copy(initial.position);
mesh.rotation.copy(initial.rotation);
mesh.scale.copy(initial.scale);
// 主动更新矩阵，不需要手动赋值matrix/quaternion
mesh.updateMatrix();

// 若需要重置BufferGeometry，再加以下代码
mesh.geometry.copy(initial.geometry);
// 标记几何属性需要刷新GPU缓存
mesh.geometry.attributes.position.needsUpdate = true;
mesh.geometry.attributes.normal.needsUpdate = true;

如果有其他需要重置的自定义属性，也可以提前备份到initialState中，重置时同步拷贝即可。

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