三、你如何围绕对象局部轴旋转

Posted 2023-02-27

【中文标题】三、你如何围绕对象局部轴旋转

【英文标题】：THREEJS how do you rotate around an objects local axis

【发布时间】：2018-05-20 17:08:56

【问题描述】：

我很难理解 ThreeJS 中局部轴旋转的工作原理。我看到了这个Rotate around local axis 的答案，但它并没有像我预期的那样工作。

如果我创建一个圆柱体并旋转它

const geometry = new THREE.CylinderBufferGeometry( 10, 10, 20 );
geometry.rotateX(Math.PI/2)

然后如何沿长轴旋转圆柱体？

我希望这可以完成这项工作：geometry.rotateY(Math.PI/5) 但这似乎是围绕世界轴旋转。我只想围绕局部轴旋转它，让它看起来和我做的一样

geometry.rotateY(Math.PI/5)
geometry.rotateX(Math.PI/2)

谁能帮助解释如何围绕对象的内轴旋转？

实际发生的情况： https://jsfiddle.net/h20hnn3n/46/

我希望它看起来像什么： https://jsfiddle.net/81j6g2ms/1/

我的用例要求我先绕 X 和任意量旋转，然后我需要绕旧的 Y 轴旋转，所以如果我能按这个顺序来做就太好了

编辑： 看来旋转几何体还是旋转网格很重要。不应该等同于做任何一种方式吗？

我真的很困惑为什么这不一样：https://jsfiddle.net/10L8se71/2/

【问题讨论】：

我认为这里已经回答了这个问题：***.com/questions/28848863/…

我不确定这是否相同。旋转一次后，我对旋转轴感到困惑，这只是展示了如何更改旋转轴，我想我确实理解。

如果我能更好地理解你错过了什么，我会帮助你。我会抛出一些事实。圆柱体的长边（20 个单位高度）垂直并与世界原点对齐。 WebGL 轴是 X（左右）、Y（自上而下）、Z（前后）。所以，长轴是 Y 轴，你先绕 Y 轴旋转。轮换顺序很重要。如果您随后围绕 X 旋转，它将向您倾斜或远离您，已经围绕垂直轴旋转。不知道混乱来自哪里。

看看this answer。概念是相同的，只是您要操作rotation 属性，而不是scale。基本上，最好旋转Mesh 而不是Geometry，因为这样您就不会改变几何形状，只是改变对象的变换。

@shlaegerz 好的。我现在知道了。此任务的圆柱体的初始状态是它已经围绕 X 轴旋转（即向您倾斜）。但是您想围绕枢轴 Y 轴旋转，就好像它发生在 X 旋转之前一样。由于旋转顺序很重要，您需要撤消旋转，应用局部变换 (rotateY)，然后重新应用 X 旋转。

【参考方案1】：

如果其他人遇到此问题，我将发布解决方案。

旋转几何体与旋转网格体的工作方式不同。因此，您需要先将其添加到网格中。以下结果是正确的：

const mesh = new THREE.Mesh( geometry, material ) ;
mesh.rotateX(Math.PI/2)
mesh.rotateY(Math.PI/5)