three.js: rotate tetrahedron on correct axis

前端未结

关注

 2  616

臣服心动

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

相关标签:

2条回答

天涯浪人

2021-01-22 06:40
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)
发布评论:

提交评论
- 加载中...

星月不相逢

2021-01-22 06:53

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)