three.js:在正确的轴上旋转四面体

Question

我必须使用three.js在动画HTML5图形中显示旋转四面体.

当我创建对象时,它是颠倒的,但它应该在地面上有一个表面,如截图所示:http://www10.pic-upload.de/08.10.12/v3nnz25zo65q.png

这是此刻旋转对象的代码.存储在render()函数中.但是轴不正确并且物体旋转错误.

object.useQuaternion = true;
var rotateQuaternion_ = new THREE.Quaternion();
rotateQuaternion_.setFromAxisAngle(new THREE.Vector3(0, 1, 1), 0.2 * (Math.PI / 180));
object.quaternion.multiplySelf(rotateQuaternion_);
object.quaternion.normalize();

(从Three.JS复制- 如何设置旋转轴)

这是目前的结果:http://jsfiddle.net/DkhT3/

如何访问正确的轴以在地面上移动/旋转四面体？

谢谢你的建议!

Answer 1

不要做你复制的.这是不正确的.

我假设你要做的是从正面开始的四面体开始.你可以做的一件事是修改THREE.TetrahedronGeometry()使用四个顶点,产生你想要的四面体.

如果要使用现有代码,那么您需要做的是在创建几何体后立即应用旋转,如下所示:

var geometry = new THREE.TetrahedronGeometry(40, 0);
geometry.applyMatrix( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), Math.atan( Math.sqrt(2)) ) );

(确定正确的旋转角度需要一些数学运算,但在这种情况下,结果是sqrt(2)的反正切,以弧度表示.)

这是一个更新的小提琴.拖动和缩放鼠标以控制相机.

小提琴:http://jsfiddle.net/DkhT3/3/