20 May 2021

Threejs Quaternion Simple Example Tutorial


Today I am going to explain that how can you use Threejs Quaternion to rotate an object? And Lot of other things to do with the helps of quaternion will be easy for you by reading the post.

Threejs Quaternion Example

in this threejs quaternion example we are going to use a THREE.PlaneGeometry. The front face of plane geomerty will be move to normal to camera 📷. Because threejs use OrbitControl, so camera is being rotated around Threejs Scene origin (0,0,0).

And the quaternion help you to rotate plane geometry's front face towards camera.

What's the intention behind this Threejs Quaternion tutorial?

To grab more knowledge over Threejs Quaternion system, How quaternion works? Below i am going to put a simple example related to Quaternion. it might help you in future. if you read this tutorial little bit more & know pros and cons of this Threejs Quaternion.


var quaternionTarget = new THREE.Quaternion();
var rotationMatrix = new THREE.Matrix4();

   var plane = new THREE.Mesh(
       new THREE.PlaneGeometry(10, 10),
       new THREE.MeshStandardMaterial({
       })
   );



plane.useQuaternion = true ;
s.add(plane);

    
  
   
    look();
    function look(){
    
      rotationMatrix.lookAt(
          c.position , //camera position as eyes
  plane.position , //looking at from eyes
  new THREE.Vector3(0,0,1) //normal to face
      );
      
      quat.setFromRotationMatrix(rotationMatrix );
        
        setTimeout(look, 2000);
    }
    
    
    
    
    animate ();
    function animate(){
        
        
        if(!quat.equals(plane.quaternion)){
            
            plane.quaternion.rotateTowards(
                quat , 0.01
            );
        }
        
    
        r.render(s , c);
        requestAnimationFrame(animate); // 
    }

Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE