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

问题描述

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

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

创建对象时，它是颠倒的，但应该是在一个表面上的地面上，例如此屏幕截图： http：// www10。 pic-upload.de/08.10.12/v3nnz25zo65q.png

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

此为当前旋转对象的代码。存储在render（）函数中。

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

（从 Three.JS-如何设置旋转轴）

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

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

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

感谢您的建议！

推荐答案

不执行复制的操作。这是不正确的。

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

我假设您要做的是从四面体开始，该四面体首先是正面朝上的。您可以做的一件事是修改 THREE.TetrahedronGeometry（）以使用四个生成所需四面体的顶点。

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.applyMatrix( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), Math.atan( Math.sqrt(2)) ) );

（确定适当的旋转角度需要一些数学运算，但事实证明这是在这种情况下为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.)

这里是更新的小提琴。拖动鼠标并缩放鼠标以控制相机。

Here is an updated fiddle. Drag and zoom the mouse to control the camera.

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

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