three.js: rotate tetrahedron on correct axis

Question

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 o

Answer 1

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.applyMatrix( 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.)

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

Fiddle: http://jsfiddle.net/DkhT3/3/