Aframe：将世界坐标转本地坐标修正子对象动画方向错误

嘿，这个问题我之前也碰到过！核心原因就是你说的——当对象是子对象时，它的位置是相对于父对象的局部空间，而你之前直接用相机的世界矩阵算出的是世界空间的位置，直接赋值给子对象的position自然会出错。

解决方案：把世界空间目标点转换为父对象的局部空间 #

我们需要两步走：

1. 先算出相机前方的世界空间目标位置（这部分你原来的代码逻辑是对的）
2. 将这个世界位置转换为子对象父对象的局部空间位置，这样子对象的position属性就能正确识别这个目标点了

修改后的代码示例：

// 步骤1：计算相机前方的世界空间位置
const worldTarget = new THREE.Vector3(0, 0, -distX).applyMatrix4(this._threeCamera.matrixWorld);

// 步骤2：获取父对象的逆世界矩阵，将世界坐标转换为父对象的局部坐标
const parentInverse = this._object.parent.matrixWorldInverse;
this._targetPosition = worldTarget.applyMatrix4(parentInverse);

原理说明 #

• matrixWorldInverse是父对象世界矩阵的逆矩阵，作用就是把世界空间的坐标转换为该对象的局部空间坐标。
• 子对象的position属性本身就是基于父对象局部空间的，所以用转换后的坐标作为目标，子对象就会正确地朝着相机方向移动，不管它是不是某个对象的子元素。

这样修改后，你例子里的盒子作为球体子对象时，就会乖乖朝着相机方向动画啦！

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