为什么当我更改Three.js网格的比例时，我的旋转会出错

Why does my rotation go awry when I change the scale of a Three.js mesh?

本文关键字：我的 旋转 出错 Three 网格 js 为什么      更新时间：2024-01-29

我想绕世界x和y轴旋转一个球体。我用这个代码成功地实现了这一点：

// Update ball rotation.
var tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(0,1,0), stepX/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(1,0,0), -stepY/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
ballMesh.rotation.getRotationFromMatrix(ballMesh.matrix);

然而，当我以任何远离（1,1,1）的方式缩放ballMesh时，旋转会以一种难以描述的方式出错。我在这里举了一个jsfiddle示例：

http://jsfiddle.net/pxTTv/26/（使用箭头键旋转）

如果你把比例（在jsfiddle代码中指示）改回（1,1,1），它会像我预期的那样工作

造成这种情况的原因是什么？我该如何解决？

您将scale参数排除在对vector.getRotationFromMatrix( matrix, scale )的调用之外。

此外，最好不要打乱对象矩阵——除非你真的知道自己在做什么。相反，只需设置对象的旋转、位置和比例，并让库更新矩阵。

在您的情况下，您覆盖了对象的矩阵，但幸运的是，它在渲染调用中被重新计算。

这是一把经过校正的小提琴：http://jsfiddle.net/pxTTv/27/

相关文章：