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

时间:2012-07-23 01:05:09

标签: javascript matrix webgl three.js rotational-matrices

我想围绕世界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);

然而,当我以任何方式缩放ballMesh(1,1,1)时,旋转会以难以描述的方式出错。我在这里提出了一个jsfiddle示例:

http://jsfiddle.net/pxTTv/26/(使用箭头键旋转)

如果您将比例(在jsfiddle代码中指示)更改回(1,1,1),它会按照我的预期工作。

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

1 个答案:

答案 0 :(得分:2)

您将scale参数从vector.getRotationFromMatrix( matrix, scale )的调用中删除。

此外,最好不要弄乱对象矩阵 - 除非你真的知道自己在做什么。而只是设置对象的旋转,位置和比例,让库更新矩阵。

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

这是一个纠正的小提琴:http://jsfiddle.net/pxTTv/27/