三.js:在正确的轴上旋转四面体 [英] three.js: rotate tetrahedron on correct axis

问题描述

我必须使用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/

如何访问正确的轴来移动/旋转地面上的四面体?

感谢您的建议！

解决方案

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

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

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

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

(确定正确的旋转角度需要一些数学运算，但在这种情况下，它是 sqrt(2) 的反正切，以弧度为单位.)

three.js r.133

I have to display a rotating tetrahedron in an animated HTML5 graphic, using three.js.

When i create the object, it's upside down, but it should be on the ground with one surface, like on this screenshot: http://www10.pic-upload.de/08.10.12/v3nnz25zo65q.png

This is the code for rotating the object, at the moment. Stored in render() function. But the axis is incorrect and the object is rotating wrong.

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();

(copied from Three.JS - how to set rotation axis)

This is the result at the moment: http://jsfiddle.net/DkhT3/

How can i access the correct axis to move/rotate the tetrahedron on the ground?

Thanks for suggestions!

解决方案

Don't do what you copied. It is not correct.

I am assuming that what you want to do is to start off with a tetrahedron that is right-side-up to begin with. One thing you can do is to modify THREE.TetrahedronGeometry() to use four vertices that produce the tetrahedron that you want.

If you want to use the existing code, then what you have to do is to apply a rotation to the geometry right after it is created, like so:

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

(Determining the proper rotation angle requires a bit of math, but it turns out to be the arctangent of the sqrt( 2 ) in this case, in radians.)

three.js r.133

这篇关于三.js:在正确的轴上旋转四面体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！