时间戳

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

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

问题描述

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

显然这张照片代表了失败。 总成旋转失败

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

沙盒在这里...

 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 计算（平移、旋转、向后平移）。

这里有任何提示和提示吗？

标签： javascriptmaththree.js

解决方案

所以，是的，这是一项正在进行的工作。而我现在已经远远超出了这一点。对我来说，这是一个使用 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 的人有用。

推荐阅读