Three.js中如何将已旋转Group内的物体放置到相机正前方

在Three.js的节点树体系中，所有子物体的position、rotation、scale都是相对于父节点的本地空间属性，子物体最终的世界空间坐标，是父节点完整变换矩阵（包含父节点自身的位移、旋转、缩放，以及父节点上层所有节点的累计变换）乘子物体本地坐标计算得到的。

你当前直接把相机的世界空间坐标赋值给子物体cube的本地position，相当于没有扣除父节点group的变换影响，最终cube的实际世界坐标会和你预期的目标位置产生明显偏差。

可行解决方案 #

方案1：将目标世界坐标转换为父节点的本地坐标（推荐，保留原有子父层级关系） #

直接调用父节点内置的worldToLocal方法，把目标世界坐标自动转换为父节点坐标系下的本地坐标，再赋值给子物体的position即可，哪怕父节点还有上层嵌套节点，该方法也会自动计算全层级的累计变换，得到正确的转换结果。

你只需要修改moveObject方法的逻辑即可：

moveObject() {
  // 拿到目标世界坐标（这里为相机的世界位置）
  const targetWorldPos = this.camera.position.clone()
  // 将世界坐标转换为父节点group的本地坐标
  this.group.worldToLocal(targetWorldPos)
  // 赋值给子物体的本地position
  this.cube.position.copy(targetWorldPos)
}

如果父节点的变换是动态更新的，每次修改子物体位置时都需要重新执行一次上述转换逻辑。

方案2：将子物体移到场景顶层，脱离父节点影响 #

如果你不需要cube再受group的任何变换影响，可以直接把cube的父节点改成顶层scene，此时cube的position就是世界坐标，你原来的赋值逻辑可以直接使用：

// 可在初始化逻辑或者其他合适的时机修改父节点
this.scene.add(this.cube)

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