Three.js 中导入的 FBX 模型围绕另一个网格的网格旋转问题

Question

出于学习的目的，我从网站上下载了一个layalty-free FBX模型，刚好是直升机。我想在 Three.js 中以编程方式模拟直升机桨叶的旋转。我通过 FBXLoader 成功导入了模型，没有任何问题。我在 Blender 中检查了它的网格，它有五十多个网格。我精确定位了刀片的网格并在 load() 函数中写下：

      pivotPoint = new THREE.Object3D();
      const loader = new THREE.FBXLoader();
      group = new THREE.Object3D();

  loader.load(
    'Apache.fbx',
     object => {
          scene.add(object);

         const twentyFive = scene.getObjectByName('Mesh25'); //This is the shaft which the blades should rotate around
         console.log(twentyFive); //x: 685.594482421875, y: 136.4067840576172, z: -501.9534606933594
         twentyFive.add(pivotPoint);

         const twentyEight = scene.getObjectByName('Mesh28');//These four are the blades
         const twentyNine = scene.getObjectByName('Mesh29');
         const twentySeven = scene.getObjectByName('Mesh27');
         const twentySix = scene.getObjectByName('Mesh26');

         group.add(twentyEight);
         group.add(twentyNine);
         group.add(twentySeven);
         group.add(twentySix);

         pivotPoint.add(group);
         scene.add(pivotPoint);
         scene.add(twentyFive);

      },
        progress => ...,
        error => ...
       );

循环渲染函数中的以下内容：

pivotPoint.rotation.y += 0.01;

然而，要么在我添加嵌套 Object3D 后四个叶片消失，要么在将代码更改为具有大量突变的上述版本后，四个叶片会奇怪地围绕天空中除了机身之外的其他点旋转，同时awe-stricken 飞行员目睹了这场灾难，对上述代码感到惊讶，就好像直升机下一秒就要坠毁一样！我尝试对代码进行许多更改。基本上我曾经在另一个场景中使用 Object3D 父子关系作为一些光源，但不知道现在是什么问题。此外，叶片围绕 Mesh25（我希望的枢轴）的旋转是围绕一个与机身没有接触的大圆，尽管所有四个叶片都围绕它们的质心旋转。我真的很感谢任何帮助，因为我真的需要学会与类似的进口模型搏斗。

Answer 1

在适当的地方使用 attach 而不是 add。

         const twentyFive = scene.getObjectByName('Mesh25');

         // add the pivot and group first so they are in the scene
         pivotPoint.add(group);
         twentyFive.add(pivotPoint);

         const twentyEight = scene.getObjectByName('Mesh28');
         const twentyNine = scene.getObjectByName('Mesh29');
         const twentySeven = scene.getObjectByName('Mesh27');
         const twentySix = scene.getObjectByName('Mesh26');

         // use attach to move something in the scene hierarchy without
         // changing its position
         group.attach(twentyEight);
         group.attach(twentyNine);
         group.attach(twentySeven);
         group.attach(twentySix);

这假设首先正确创建了模型，并且轴的位置 Mesh25 位于轴的中心。

注意：如果轴的原点位置正确并且叶片已经是轴的子项，您只需旋转轴即可。

Three.js 中导入的 FBX 模型围绕另一个网格的网格旋转问题

Problem in Mesh Rotation around another Mesh of imported FBX model in Three.js

axis

pivot

mesh

rotation

three.js