three.js - Threejs 按 x 和 z 进行的旋转单独工作,但一起失败

标签 three.js webgl

我需要围绕 x 和 z 轴旋转钻石(参见附件)。当单独旋转时(意味着我只设置rotation.x或rotation.z),旋转看起来很好并且可以工作。但是当我设置两个旋转(x 和 z)时,旋转看起来像这样:

diamond rotation fail

我错过了什么吗?不知何故,对象局部坐标系发生了旋转,现在绕 2 个轴的旋转失败了?

diamond.position = brilliantPositions[i][0];
diamond.rotation = brilliantPositions[i][1];
this.frames.arrangementMesh.add(diamond);

提前感谢您的提示 亲切的问候 罗曼和帕特里克

最佳答案

欧拉阶确实为我们解决了问题。在我们的例子中,我们必须执行以下操作

diamond.eulerOrder = 'ZYX';

为了让计算采取正确的方式。非常感谢!

Here's more information about euler order

PS:我无法接受 WestLangley 的评论作为答案,因此我只是将其升级并在此处重新发布解决方案

关于three.js - Threejs 按 x 和 z 进行的旋转单独工作,但一起失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16675676/

相关文章:

javascript - WebGL 着色器程序不工作

opengl-es - 无法让 OpenGL 代码正常工作

canvas - WebGL blit 纹理到 Canvas

javascript - 试图改变点击的 Three.js 对象的颜色,但场景中所有对象的颜色都改变了

javascript - Aframe 使用 Three.js 更改对象位置

javascript - 改进 THREE.js 中旋转三 Angular 形/面的 UV 坐标生成

javascript - Three.js 中的超链接 CSS3D 对象

javascript - 为什么我的游戏在 Firefox 中那么慢?

javascript - 使用动画缩放立方体 Y webgl Three.js

javascript - 始终通过计算 A-Frame 中对象的边界框来获得 Infinity