three.js: rotate tetrahedron on correct axis

2019-08-03 00:26发布

站内问答 / JavaScript
1543 2 4

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!

2条回答
Ridiculous、
2楼-- · 2019-08-03 00:59

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/

查看更多
0人赞 添加讨论(0) 举报
霸刀☆藐视天下
3楼-- · 2019-08-03 01:17 
Download three.js from [http://www.html5canvastutorials.com/libraries/Three.js] library and put in the below HTML code. 
You will get good output.

<!Doctype html>
<html lang="eng">
<head>
    <title>I like shapes</title>
    <meta charset="UTF-8">
     <style>
     canvas{
     width: 100%; 
     height: 100% 
     }
    body{
    background: url(mathematics.jpg);
    width: 800px; 
    height: 500px;
    }
     </style>
</head>
<body>

    <script src="three.js"></script>

    <script> 
    // creating a Scene
    var scene = new THREE.Scene(); 

    // Adding Perspective Camera
    // NOTE: There are 3 cameras: Orthographic, Perspective and Combined.   
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 


    //create WebGL renderer 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    //Drawing a Tetrahedron.
    var pyramidgeometry = new THREE.CylinderGeometry(0, 0.8, 4, 4, false);

    //Change colour of Pyramid using Wireframe
    var pyramidmaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x0ff000});
    var pyramid = new THREE.Mesh(pyramidgeometry, pyramidmaterial); //This creates the cone
    pyramid.position.set(3.1,0,0);
    scene.add(pyramid);

    //moving camera outward of centre to Z-axis, because Cube is being created at the centre
    camera.position.z = 5;

    //we have a scene, a camera, a cube and a renderer. 

    /*A render loop essentially makes the renderer draw the scene 60 times per second.
    I have used requestAnimationFrame() function.*/
    var render = function() {
    requestAnimationFrame(render);

    /*cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    cube.rotation.z += 0.01;*/

    pyramid.rotation.y += 0.01;
    pyramid.rotation.x += 0.01;
    pyramid.rotation.z += 0.01;

    renderer.render(scene, camera);
    };
    // calling the function
    render();

    </script>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)