我试图学习有关three.js的更多信息,以便可以在一种简单的机制上执行测试。最终,对于不同的设计,所需的输出将是板倾斜(正视图)相对于轴方向(平面图)的倾斜。(XY图),但这显然是第5或第6步。我被困在第一步,试图了解如何获得以小直径圆柱体表示的旋转轴。
该模型代表一个简单的滑板。根据用户选择的滑块元素,我想绕倾斜轴旋转前卡车吊架(包含一个轴和两个轮子)。
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进行工程相关分析的学习练习。我想分享一些我学到的技巧。
我发现该帖子的答案来自“ Q的陌生人”该代码是一个旋转的太阳系,它由太阳,地球(具有旋转的月亮和岩石)和火星(具有另外两个行星)组成。我非常仔细地研究了这个示例,理解并真正理解了所发生的一切。该程序明确说明了旋转是如何传播给孩子的(月亮绕地球旋转,而地球绕太阳旋转等)。内容由ThreeJS场景外部的一个简单对象管理。该程序使用一些递归函数来管理动画功能中子元素的动作。需要一些更新,例如THREE.Object3d的构造函数不再使用名称。纠正措施是在创建对象之后简单地添加名称值。当您准确命名所有内容时,更容易理解整个子层次。
我发现的另一件事是一个贴有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
}
复杂的嵌套3d网格的一个技巧。在THREE.abcGeometry对象阶段完成所有几何图形的工作,包括零件零件的方向/平移/旋转。不要创建网格,然后尝试在场景空间中定向对象。当您进行几何图形的平移和旋转时,在进行动画处理时,所有内容都会完美对齐。直到我尝试一切都没有道理。轴方向似乎都混杂在一起。
我发现一种技术有用。我想知道旋转/动画功能期间我的元素在3d空间中的位置。我不知道如何在3d网格物体上执行此操作。顶点太多,无法使用。取而代之的是,我创建了一个简单的线对象,并在旋转期间与装配体的其余部分一起操纵该对象。临时移动后,我可以通过检查线的两个顶点来查询线,创建一个新的3d vector.normalize()并将其用于将来的计算。这似乎工作得很好。
我上面提出的问题实际上已被整个滑板卡车模型问题上的许多进展所取代。上面的沙箱中的某些代码很糟糕。请甚至不要浪费时间查看它。相反,我认为我要做的是开源已完成的项目,并在此处列出github repo链接和演示,以便其他人可以一窥我的进度。
也许这对其他学习ThreeJS的人有用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句