Spinning a tetrahedron in three.js along the proper axis

Question

Spinning a tetrahedron in three.js along the proper axis

I need to showcase a rotating tetrahedron in an animated HTML5 graphic, using three.js.

Despite creating the object, it appears upside down instead of resting on the ground with one surface facing up, like in this reference image:

The current rotation code within the render() function isn't producing the desired result. The axis seems off, causing the object to rotate incorrectly.

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

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

Here is the current output: http://jsfiddle.net/DkhT3/

Any suggestions on accessing the correct axis to properly move/rotate the tetrahedron on the ground?

Thank you for any advice!

javascript 3d rotation three.js

Answer 1

Answer №1

Avoid simply replicating what you have seen. It may not yield the desired outcome.

If you wish to initialize a tetrahedron in the upright position from the start, consider adjusting the THREE.TetrahedronGeometry() function to utilize four specific vertices to create the desired shape.

Alternatively, if you prefer to stick with the existing code, you can apply a rotational transformation to the geometry immediately after its creation:

const geometry = new THREE.TetrahedronGeometry( 10, 0 );
geometry.applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), Math.atan( Math.sqrt(2) ) ) );
geometry.translate( 0, 10/3, 0 ); // optional adjustment to position the tetrahedron

(Calculating the precise rotation angle involves some mathematical calculations, with the result being the arctangent of sqrt(2) in radians for this scenario.)

Version: three.js r.146

Answer 2

Avoid simply replicating what you have seen. It may not yield the desired outcome.

If you wish to initialize a tetrahedron in the upright position from the start, consider adjusting the THREE.TetrahedronGeometry() function to utilize four specific vertices to create the desired shape.

Alternatively, if you prefer to stick with the existing code, you can apply a rotational transformation to the geometry immediately after its creation:

const geometry = new THREE.TetrahedronGeometry( 10, 0 );
geometry.applyMatrix4( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), Math.atan( Math.sqrt(2) ) ) );
geometry.translate( 0, 10/3, 0 ); // optional adjustment to position the tetrahedron

(Calculating the precise rotation angle involves some mathematical calculations, with the result being the arctangent of sqrt(2) in radians for this scenario.)

Version: three.js r.146

Answer 3

Answer №2

Get the three.js library from [http://www.html5canvastutorials.com/libraries/Three.js] and insert it into the HTML code below. 
This will yield impressive results.

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

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

    <script> 
    // setting up the Scene
    var scene = new THREE.Scene(); 

    // Introducing Perspective Camera
    // NOTE: choices include Orthographic, Perspective, and Combined cameras.
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 


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

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

    //Adjusting Pyramid color using Wireframe
    var pyramidmaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x0ff000});
    var pyramid = new THREE.Mesh(pyramidgeometry, pyramidmaterial); //Generates the pyramid shape
    pyramid.position.set(3.1,0,0);
    scene.add(pyramid);

    //shifting camera outward on the Z-axis, as Cube will be positioned at the center
    camera.position.z = 5;

    //we now have a scene, a camera, a pyramid, and a renderer. 

    /*A render loop essentially prompts the renderer to draw the scene 60 times per second.
    The requestAnimationFrame() function is utilized.*/
    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);
    };
    // executing the function
    render();

    </script>
</body>
</html>

Answer 4

Get the three.js library from [http://www.html5canvastutorials.com/libraries/Three.js] and insert it into the HTML code below. 
This will yield impressive results.

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

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

    <script> 
    // setting up the Scene
    var scene = new THREE.Scene(); 

    // Introducing Perspective Camera
    // NOTE: choices include Orthographic, Perspective, and Combined cameras.
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 


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

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

    //Adjusting Pyramid color using Wireframe
    var pyramidmaterial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x0ff000});
    var pyramid = new THREE.Mesh(pyramidgeometry, pyramidmaterial); //Generates the pyramid shape
    pyramid.position.set(3.1,0,0);
    scene.add(pyramid);

    //shifting camera outward on the Z-axis, as Cube will be positioned at the center
    camera.position.z = 5;

    //we now have a scene, a camera, a pyramid, and a renderer. 

    /*A render loop essentially prompts the renderer to draw the scene 60 times per second.
    The requestAnimationFrame() function is utilized.*/
    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);
    };
    // executing the function
    render();

    </script>
</body>
</html>

Spinning a tetrahedron in three.js along the proper axis

Answer №1

Answer №2

Similar questions

The password encryption method with "bcrypt" gives an undefined result

Adding a fresh HTML element to a list at a designated location

Exploring Parameters to Customize Search Results in React

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

Is it possible to utilize both body-parser and Formidable simultaneously?

Issue with sending functions to other components in Angular

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

While validating in my Angular application, I encountered an error stating that no index signature with a parameter of type 'string' was found on type 'AbstractControl[]'

Having trouble pinpointing the issue with this particular if statement?

Navigating to a specific element following an AJAX request

Using AngularJS's ng-repeat directive to convert expressions into JavaScript code

Modal Pop-ups Failing to Open on Subsequent Attempts

Filtering in AngularJS can be done by combining two fields at

require an array that contains an embedded object

Display a div beside it when hovering over a specific part of the image

Is today within the current week? Utilizing Moment JS for time tracking

Synchronize numerous PouchDB databases with a single CouchDB database

Arranging div containers with nested content

The state remains unchanged when useState is invoked

What could be the reason for my Three.js file displaying only a blank white screen on the live server?