如何在 Three.js 工作区中围绕随机 3d 对象/网格/3d 线的轴旋转网格组？

Question

我正在尝试了解更多有关three.js 的信息，以便我可以对一个简单的机制进行测试。 对于不同的设计，最终所需的输出将是板倾斜（前视图）到轴方向（平面图）。 （XY 图），但这显然是第五步或第六步……我被困在第一步，试图了解如何获得由小直径圆柱体表示的旋转轴。

显然这张照片代表了失败。

• 我希望利用 Three.js 中现有的矩阵工具来执行数据图表/系统分析。
• 不清楚网格对象中的 worldMatrix 对象真正代表什么。 我认为它包含位置、方向和缩放因子，但不清楚如何提取该信息以用于世界空间中其他组件的平移/3d 旋转。
• 我猜我最好制作原始组件位置和矩阵值的副本，然后处理副本。 当你向左和向后倾斜时，你不会回到原来的地方。

该模型代表一个简单的滑板。 我想根据用户选择的滑块元素围绕倾斜轴旋转前卡车吊架（包含一个轴和两个轮子）。

沙箱在这里...

 var euler;
 const rotateMeshGroup =( meshGroup, rotationAxis, angleOfRotation) =>{
     euler = new THREE.Euler().setFromRotationMatrix(rotationAxis.matrixWorld);
     meshGroup.children.forEach(item => {
         item.rotateOnAxis(euler, THREE.MathUtils.degToRad(angleOfRotation));
     }) 
 }

我不明白人们如何创建旋转轴。 我理解的 3D 角度，但是与轴的距离呢？ 那是矩阵叉积计算吗（到 3D 轴的最短距离，距离垂直于轴？）

编辑：仍在试图弄清楚这一点。 一直在通过大量的 console.logs 涉水，我在罐头矩阵中看不到任何有用的东西。 我已将枢轴从小直径圆柱体网格对象转换为由两个矢量端点定义的简单线。 我现在正在考虑在 RotateMeshGroup 函数中进行 delta-x、delta-y、delta-z 计算（平移、旋转、平移回来）。

这里有什么提示和提示吗？

Answer 1

所以，是的，这是一项正在进行的工作。 而我现在已经远远不止于此。 对我来说，这是使用 Three.js 进行工程相关分析的学习练习。 我想分享一些我学到的技巧。

1. 我发现这篇文章的答案来自“Q 中的陌生人”代码是一个旋转的太阳系，有太阳、地球（有旋转的月亮和岩石）和火星（有另外两个行星）。我非常仔细地阅读了这个例子，理解，真正了解正在发生的一切。 该程序清楚地说明了旋转是如何传播给孩子的（月球绕地球旋转，而地球绕太阳旋转等等......）内容由 ThreeJS 场景外部的一个简单对象管理。 该程序使用一些递归函数来管理动画功能中子元素的动作。 需要进行一些更新，例如，THREE.Object3d 的构造函数不再采用名称。 纠正措施是在对象创建后简单地添加一个名称值。 当您准确地命名所有内容时，更容易理解整个子层次结构。 这个例子再次帮助我理解其中的一些东西。

2. 我发现的另一件事是一个来自 BadAskTechie 的回答的帖子回复很简单，而且直截了当。

    //rotates a mesh's geometry about a specified axis and pivot //the axis is a normalized Vector3 const rotateAbout = (mesh, axis, axisPosition, angle) => { mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(mesh.position.x-axisPosition.x, mesh.position.y-axisPosition.y, mesh.position.z-axisPosition.z)); //translate geometry to axis location mesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationAxis(axis, angle)); //rotate geometry about axis mesh.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(axisPosition.x-mesh.position.x, axisPosition.y-mesh.position.y, axisPosition.z-mesh.position.z)); //translate geometry back to original location }

3. 复杂嵌套 3d 网格的一个技巧。 在 THREE.abcGeometry 对象阶段完成所有几何工作，包括部件的方向/平移/旋转。 不要创建网格，然后尝试在场景空间中定位对象。 当您在几何体中进行平移和旋转时，当需要制作动画时，一切都会完美排列。 直到我试过才觉得没有任何意义。 轴方向似乎都被混淆了。

4. 我发现一种技术很有用。 我想知道在旋转/动画功能期间我的元素在 3d 空间中的位置。 我不知道如何在 3d 网格对象上做到这一点。 有太多的顶点没有用。 相反，我创建了一个简单的线对象，并在旋转过程中与组件的其余部分一起操作。 在临时移动之后，我可以通过检查它的两个顶点来查询该线，创建一个新的 3d vector.normalize() 并在以后的计算中使用它。 这似乎工作得很好。

5. 我在上面提出的问题确实被整个滑板卡车模型问题的大量进展所取代。 上面沙箱中的一些代码很糟糕。 请不要浪费时间看它。 相反，我认为我要做的是将已完成的项目开源，并在此处列出 github repo 链接和演示，以便其他人可以一瞥我的进度。

也许这对其他人学习 ThreeJS 有用。