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

Question

出于学习目的，我从一个网站上下载了一个无躺位的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，四个叶片就会消失，要么在将代码更改为具有大量突变的上述版本时，四个叶片会奇怪地围绕天空中的其他点旋转，除了机身，而敬畏的飞行员看着灾难并惊讶于上述代码，好像直升机随时都会坠毁！ 我尝试了对代码进行许多更改。基本上，我曾经在另一个场景中使用过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在轴的中心。

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