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

邮编

我试图学习有关three.js的更多信息,以便可以在一种简单的机制上执行测试。最终,对于不同的设计,所需的输出将是板倾斜(正视图)相对于轴方向(平面图)的倾斜。(XY图),但这显然是第5或第6步。我被困在第一步,试图了解如何获得以小直径圆柱体表示的旋转轴。

显然,这张照片表示失败。 组件旋转失败

  • 我希望利用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计算(平移,旋转,向后平移)。

这里有任何提示吗?

邮编

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何最好地表示3D欧式空间中的网格图?

来自分类Dev

如何在3D空间中生成随机点?

来自分类Dev

C#-如何在3维空间中3D堆叠对象?

来自分类Dev

如何在three.js中从BufferGeometry绘制2D/3D网格

来自分类Dev

three.js-如何围绕lookAt(object)和相机位置之间的线旋转相机

来自分类Dev

如何逐步合并3D网格

来自分类Dev

围绕矢量3d旋转点

来自分类Dev

Three.js-围绕轴旋转Object3D

来自分类Dev

使用SceneKit在3D空间中旋转SCNode对象

来自分类Dev

如何在3D空间中绘制参数曲线?

来自分类Dev

如何连接 3D 空间中的点?(MATLAB)

来自分类Dev

如何使用three.js从随机点制作3D对象?

来自分类Dev

如何在python中的常规3D网格上找到相邻的线

来自分类Dev

如何围绕3D轴(Y)旋转2D UIElement?

来自分类Dev

如何围绕3D轴(Y)旋转2D UIElement?

来自分类Dev

Three.js可视化3D空间中的3个热图切片

来自分类Dev

在3D空间中使用GLSL绘制2D网格

来自分类Dev

如何模拟由一组图像表示的对象的3D旋转

来自分类Dev

如何在3D图中脱离网格

来自分类Dev

如何在Kivy中更改3D网格的颜色?

来自分类Dev

opengl中3d空间中的平面上的过程网格

来自分类Dev

在运行时在 Aframe 中加载 3D 对象时如何访问网格?

来自分类Dev

DirectX 3D围绕lookAt旋转eyePt

来自分类Dev

围绕其自身的轴旋转3D图元

来自分类Dev

如何按照 vanilla webgl 中的 THREE.js 解决方案中所述围绕枢轴点旋转对象?

来自分类Dev

使用矩阵在3D空间中定位对象

来自分类Dev

在按钮上旋转 3D 对象单击 Three.js

来自分类Dev

如何使Unity 3d随机范围游戏对象销毁?

来自分类Dev

3D 网格:如何检测曲面/网格是否根据投影平面折叠

Related 相关文章

热门标签

归档