如何将ThreeJS对象附加到另一对象？3自由度直升机模拟求助

我来帮你梳理下问题所在，然后给出标准的解决方案——核心是利用ThreeJS的父子节点层级关系来处理联动变换，这比手动计算矩阵和位置要可靠得多。

你的代码核心问题 #

1. 你用merge把电机、连杆合并成了一个几何体，这直接导致这些部件失去了独立变换的能力，而且无法和主杆形成联动关系；
2. 手动计算位置和旋转的方式容易出错，你只同步了前端部件的位置，却没同步旋转，所以主杆转的时候前端部件只会平移不会跟着转；
3. 手动调用updateMatrix/updateMatrixWorld属于冗余操作，ThreeJS在渲染时会自动处理节点的矩阵更新。

重构后的解决方案 #

我们用THREE.Group来组合前端部件，然后将这个组挂载为主杆的子节点，这样主杆的旋转会自动传递给前端组，同时前端组还能保持自身独立旋转的能力：

function threedof(scene) {
    const motorGeo = new THREE.CylinderGeometry(2, 2, 2, 64);
    const material = new THREE.MeshPhongMaterial({ color: 0xFF0000 });

    // 1. 创建前端部件组：用来整合两个电机和电机连杆
    this.frontGroup = new THREE.Group();

    // 前电机
    const mfM = new THREE.Mesh(motorGeo, material);
    mfM.position.x = 10;
    mfM.rotation.x = Math.PI / 2;
    this.frontGroup.add(mfM);

    // 后电机
    const mbM = new THREE.Mesh(motorGeo, material);
    mbM.position.x = 10;
    mbM.position.y = 10;
    mbM.rotation.x = Math.PI / 2;
    this.frontGroup.add(mbM);

    // 电机连杆
    const motorRodGeo = new THREE.CylinderGeometry(0.5, 0.5, 10, 64);
    const motorRod = new THREE.Mesh(motorRodGeo, material);
    motorRod.position.x = 10;
    motorRod.position.y = 5;
    this.frontGroup.add(motorRod);

    // 调整前端组的原点，让它对齐到主杆的末端（方便挂载）
    this.frontGroup.position.set(-10, -5, 0);

    // 2. 创建主杆
    const bodyRodGeo = new THREE.CylinderGeometry(0.5, 0.5, 25, 3);
    bodyRodGeo.center();
    this.rod = new THREE.Mesh(bodyRodGeo, material);
    this.rod.rotation.z = Math.PI / 2;
    this.rod.position.x = -12;
    this.rod.position.y = 0;
    scene.add(this.rod);

    // 3. 关键：将前端组挂载为主杆的子节点
    // 主杆长度25，center后末端在local坐标系的x=12.5位置
    this.frontGroup.position.set(12.5, 0, 0);
    this.rod.add(this.frontGroup);

    // 主杆旋转方法（简化版）
    this.rotateRODy = function(angle) {
        this.rod.rotation.y = angle;
        // ThreeJS会自动处理子节点的变换，无需手动更新矩阵
    }
}

然后修改你的animate函数，分别控制主杆旋转和前端部件的自身旋转：

function animate() {
    requestAnimationFrame(animate);

    // 前端组自身绕X轴独立旋转
    threeDOF.frontGroup.rotation.x += 0.01;

    // 主杆绕Y轴旋转，带动前端组联动
    threeDOF.rotateRODy(threeDOF.rod.rotation.y + 0.01);

    renderer.render(scene, camera);
}

额外说明 #

• 如果需要单独控制某个电机的旋转（比如前电机自己转），直接操作mfM.rotation.x += 0.01即可，它会跟着前端组和主杆一起联动，同时保持自身旋转；
• 调试时可以添加THREE.AxesHelper(10)到各个节点，方便查看坐标系位置，帮助你调整部件的相对位置；
• 记得用Math.PI替代你代码里的PI，避免未定义变量报错。

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