Three.js升级后旋转/缩放Mesh时位置异常问题求助

Three.js从v0.96.0到v0.167.1的大版本升级中，TransformControls的核心行为（尤其是轴心点、空间变换逻辑）有不少调整，导致旧代码出现旋转/缩放时位置偏移的问题。以下是针对性的修复方案：

1. 强制设置局部空间变换模式 #

旧版本TransformControls默认隐式使用局部空间，而新版本默认是世界空间。显式设置为局部空间可匹配旧行为：

// 创建TransformControls时添加
const controls = new THREE.TransformControls(camera, renderer.domElement);
controls.setSpace('local'); // 关键：指定以模型自身坐标系为基准变换
scene.add(controls);

2. 显式绑定模型几何中心为变换轴心 #

新版本中TransformControls不再自动将模型几何中心作为默认轴心，需手动计算并设置：

// 模型加载完成后执行
const mesh = 你的Mesh实例;

// 计算几何体中心
mesh.geometry.computeBoundingBox();
const center = new THREE.Vector3();
mesh.geometry.boundingBox.getCenter(center);

// 设置变换轴心并绑定模型
controls.setPivot(center);
controls.attach(mesh);

如果不需要移动几何体本身，仅调整变换轴心，用上述代码即可；如果希望几何体自身居中到局部原点，可额外执行mesh.geometry.center()。

3. 确保模型矩阵自动更新正常 #

若你手动修改过模型的matrix属性并关闭了自动更新，会导致TransformControls计算错误：

// 确保开启自动更新（默认是true，若被修改则恢复）
mesh.matrixAutoUpdate = true;
// 强制更新一次矩阵（可选，修复初始状态异常）
mesh.updateMatrixWorld(true);

4. 排查父节点变换干扰 #

如果模型嵌套在父对象下，父对象的非单位变换（如缩放、旋转）会影响TransformControls的计算。可临时将模型直接添加到场景根节点测试，若问题消失，需调整父节点的变换设置，或给TransformControls指定父对象的空间：

// 若模型有父节点，设置TransformControls以父节点空间为基准
controls.setSpace('local');
controls.attach(mesh);
// 或者确保父节点的矩阵是单位矩阵（无额外缩放/旋转）
parentMesh.scale.set(1,1,1);
parentMesh.rotation.set(0,0,0);
parentMesh.updateMatrixWorld(true);

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