Three.js：无需分组实现球体始终固定在立方体右侧的方法

当然可以不用THREE.Group实现这个效果，核心思路是手动计算球体相对于立方体的世界位置，模拟Group中子物体继承父物体变换的逻辑。下面是两种常用的实现方式：

方法一：基于世界位置与方向向量计算 #

这种方法适合需要自定义相对位置（比如忽略立方体缩放影响）的场景：

1. 获取立方体的世界空间位置
2. 计算立方体当前的右侧方向（考虑旋转后的世界方向）
3. 将立方体位置加上右侧方向乘以偏移距离，得到球体的位置

代码示例：

// 定义球体到立方体右侧的偏移距离
const offset = 1;

function updateSpherePosition() {
    // 获取立方体的世界位置
    const cubeWorldPos = new THREE.Vector3();
    cube.getWorldPosition(cubeWorldPos);

    // 计算立方体当前的右侧世界方向
    const rightDirection = new THREE.Vector3(1, 0, 0);
    rightDirection.applyMatrix4(cube.matrixWorld);
    rightDirection.normalize(); // 确保方向向量是单位长度

    // 设置球体位置：立方体世界位置 + 右侧方向 × 偏移量
    sphere.position.copy(cubeWorldPos).add(rightDirection.multiplyScalar(offset));
}

// 在动画循环中调用更新逻辑
function animate() {
    requestAnimationFrame(animate);

    // 立方体的移动/旋转逻辑
    cube.rotation.y += 0.01;
    cube.position.x += 0.005;

    // 更新球体位置
    updateSpherePosition();

    renderer.render(scene, camera);
}

方法二：利用矩阵变换直接转换局部坐标 #

这种方法完全模拟Group的子物体变换逻辑（包含位置、旋转、缩放的继承），效果和用Group一致：

核心是把球体在立方体局部坐标系中的位置（比如(offset, 0, 0)表示右侧），通过立方体的matrixWorld（包含所有世界变换的矩阵）转换为世界空间位置。

代码示例：

// 球体在立方体局部坐标系中的位置（右侧偏移1单位）
const localSpherePosition = new THREE.Vector3(1, 0, 0);

function updateSpherePosition() {
    // 将局部坐标通过立方体的世界矩阵转换为世界坐标
    sphere.position.copy(localSpherePosition).applyMatrix4(cube.matrixWorld);
}

// 动画循环中调用（同方法一）
function animate() {
    requestAnimationFrame(animate);

    cube.rotation.y += 0.01;
    cube.position.x += 0.005;

    updateSpherePosition();

    renderer.render(scene, camera);
}

额外说明 #

如果不希望球体跟随立方体的缩放变化，可以提取立方体的旋转矩阵单独计算方向（忽略缩放影响）：

function updateSpherePosition() {
    const cubeWorldPos = new THREE.Vector3();
    cube.getWorldPosition(cubeWorldPos);

    // 只提取立方体的旋转矩阵（忽略缩放）
    const rotationMatrix = new THREE.Matrix4();
    rotationMatrix.extractRotation(cube.matrixWorld);

    const rightDirection = new THREE.Vector3(1, 0, 0);
    rightDirection.applyMatrix4(rotationMatrix);
    rightDirection.normalize();

    sphere.position.copy(cubeWorldPos).add(rightDirection.multiplyScalar(offset));
}

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