Three.js中如何根据关联对象缩放更新对象相对位置

问题描述 #

场景中存在House对象，其内部指定位置放置有Chair对象；当将House的缩放比例调整为2倍放大后，Chair会受坐标空间独立的影响，偏离House内部原本的预设位置，需要实现无手动参数调整的自动位置校准。

问题本质 #

Three.js 采用层级场景图结构，默认只有父节点的变换会自动递归作用到所有子节点。如果Chair和House同属场景根节点的平级对象，两者的坐标为独立的世界坐标，House的缩放、位移、旋转变换不会对Chair产生任何影响，自然会出现位置错位。 #

解决方案 #

方案1：利用场景图层级继承（零额外计算，优先使用） #

这是Three.js原生支持的方案，不需要手写任何校准逻辑，性能最优、维护成本最低。
操作步骤：

• 初始状态下（House为默认缩放1倍、位置旋转为初始值时），先将Chair对齐到House内部的目标位置
• 提前记录Chair当前的世界坐标，将Chair挂载为House的子节点，再把记录的世界坐标转换为House的局部坐标赋值给Chair，避免挂载时坐标错位，参考代码：

// 记录Chair当前的世界坐标
const chairWorldPos = new THREE.Vector3()
Chair.getWorldPosition(chairWorldPos)
// 挂载为House子节点
House.add(Chair)
// 将世界坐标转为House的局部坐标赋值，保证位置不偏移
Chair.position.copy(House.worldToLocal(chairWorldPos))
// 如果需要同步保持相对旋转、缩放，可按相同逻辑处理quaternion、scale属性

挂载完成后，无论后续对House做缩放、平移、旋转任意变换，Chair都会自动保持相对于House的位置、角度、大小比例，完全不需要手动校准。 #

方案2：手动同步变换矩阵（仅适用于无法修改场景层级的特殊场景） #

如果业务逻辑限制Chair不能成为House的子节点（比如Chair需要独立的渲染层级、单独的碰撞检测规则等），可以通过记录初始相对偏移，每次House变换后手动计算Chair的正确位置。
操作步骤：

• 初始状态下记录Chair相对于House的偏移系数：

// 记录House初始缩放值
const initHouseScale = House.scale.clone()
// 计算初始状态下Chair相对于House的位置偏移
const chairInitWorldPos = new THREE.Vector3()
Chair.getWorldPosition(chairInitWorldPos)
const initOffset = chairInitWorldPos.sub(House.position)
// 计算单位缩放下的偏移系数，后续缩放直接乘系数即可
const offsetFactor = initOffset.divide(initHouseScale)

• 每次House的scale/position/quaternion更新后，重新计算Chair的世界坐标：

// House变换完成后执行同步
const syncedChairPos = House.position.clone()
  .add(offsetFactor.clone().multiply(House.scale))
  // 如果House存在旋转，需要对偏移量应用House的旋转
  .applyQuaternion(House.quaternion)
Chair.position.copy(syncedChairPos)

注意：该方案需要手动维护变换同步逻辑，容易漏判旋转、非均匀缩放等场景的计算误差，非必要不使用。

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