What is the method for rotating an object on the world axis in three.js?

Question

What is the method for rotating an object on the world axis in three.js?

Is there a way to perform rotations using the axis of the world rather than the object?

I'm attempting to rotate an object, but I'm finding that after the initial rotation, subsequent rotations are not behaving as expected.

If rotating along the world axis is not an option, my next approach would be to reset the axis after each rotation. Is there a specific function that can help with this?

I've encountered issues when trying to use object.eulerOrder, as it alters the orientation of my object when setting object.eulerOrder="YZX" after multiple rotations.

javascript three.js

Answer 1

Answer №1

UPDATED: VERSION 0.125.2

DEMONSTRATION: codesandbox.io

const THREE = require("three");

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);
const material = new THREE.MeshBasicMaterial({
  color: 0xaf49bd,
  wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// specify the Z-axis in the global coordinate system
const axisZ = new THREE.Vector3(0, 0, 1);
// rotate the object by 45 degrees around this axis
cube.rotateOnWorldAxis(axisZ, THREE.Math.degToRad(45));

function animate() {
  // rotate the object on its Y axis,
  // considering that the cube has been previously tilted at a 45-degree angle.
  cube.rotation.y += 0.008;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

Answer 2

UPDATED: VERSION 0.125.2

DEMONSTRATION: codesandbox.io

const THREE = require("three");

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1, 4, 4, 4);
const material = new THREE.MeshBasicMaterial({
  color: 0xaf49bd,
  wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// specify the Z-axis in the global coordinate system
const axisZ = new THREE.Vector3(0, 0, 1);
// rotate the object by 45 degrees around this axis
cube.rotateOnWorldAxis(axisZ, THREE.Math.degToRad(45));

function animate() {
  // rotate the object on its Y axis,
  // considering that the cube has been previously tilted at a 45-degree angle.
  cube.rotation.y += 0.008;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

Answer 3

Answer №2

Here's a slight modification, tested using version r56.

THREE.Object3D._matrixAux = new THREE.Matrix4(); // global auxiliary variable
// Caution: 1) axis is assumed to be normalized.
//  2) matrix must be updated. If not, call object.updateMatrix() first
//  3) this assumes we are not utilizing quaternions
THREE.Object3D.prototype.rotateAroundWorldAxis = function(axis, radians) { 
    THREE.Object3D._matrixAux.makeRotationAxis(axis, radians);
    this.matrix.multiplyMatrices(THREE.Object3D._matrixAux,this.matrix); // r56
    THREE.Object3D._matrixAux.extractRotation(this.matrix);
    this.rotation.setEulerFromRotationMatrix(THREE.Object3D._matrixAux, this.eulerOrder ); 
    this.position.getPositionFromMatrix( this.matrix );
}
THREE.Object3D.prototype.rotateAroundWorldAxisX = function(radians) { 
    this._vector.set(1,0,0);
    this.rotateAroundWorldAxis(this._vector,radians);
}
THREE.Object3D.prototype.rotateAroundWorldAxisY = function(radians) { 
    this._vector.set(0,1,0);
    this.rotateAroundWorldAxis(this._vector,radians);
}
THREE.Object3D.prototype.rotateAroundWorldAxisZ = function(degrees){ 
    this._vector.set(0,0,1);
    this.rotateAroundWorldAxis(this._vector,degrees);
}

The last three lines serve to synchronize the parameters (position,rotation) with the matrix... I am curious if there exists a more efficient approach for this...

Answer 4

Here's a slight modification, tested using version r56.

THREE.Object3D._matrixAux = new THREE.Matrix4(); // global auxiliary variable
// Caution: 1) axis is assumed to be normalized.
//  2) matrix must be updated. If not, call object.updateMatrix() first
//  3) this assumes we are not utilizing quaternions
THREE.Object3D.prototype.rotateAroundWorldAxis = function(axis, radians) { 
    THREE.Object3D._matrixAux.makeRotationAxis(axis, radians);
    this.matrix.multiplyMatrices(THREE.Object3D._matrixAux,this.matrix); // r56
    THREE.Object3D._matrixAux.extractRotation(this.matrix);
    this.rotation.setEulerFromRotationMatrix(THREE.Object3D._matrixAux, this.eulerOrder ); 
    this.position.getPositionFromMatrix( this.matrix );
}
THREE.Object3D.prototype.rotateAroundWorldAxisX = function(radians) { 
    this._vector.set(1,0,0);
    this.rotateAroundWorldAxis(this._vector,radians);
}
THREE.Object3D.prototype.rotateAroundWorldAxisY = function(radians) { 
    this._vector.set(0,1,0);
    this.rotateAroundWorldAxis(this._vector,radians);
}
THREE.Object3D.prototype.rotateAroundWorldAxisZ = function(degrees){ 
    this._vector.set(0,0,1);
    this.rotateAroundWorldAxis(this._vector,degrees);
}

The last three lines serve to synchronize the parameters (position,rotation) with the matrix... I am curious if there exists a more efficient approach for this...

Answer 5

Answer №3

Once you reach level 59, this task becomes much simpler (spin around the x-axis):

const calculateRotation = function ( object, rotateX )
{
    const euler = new THREE.Euler( rotateX, 0, 0, 'XYZ' );
    object.position.applyEuler( euler );
}

Answer 6

Once you reach level 59, this task becomes much simpler (spin around the x-axis):

const calculateRotation = function ( object, rotateX )
{
    const euler = new THREE.Euler( rotateX, 0, 0, 'XYZ' );
    object.position.applyEuler( euler );
}

Answer 7

Answer №4

Updated response by @Neil (tested on r98)

function rotateObject(obj, axis, angle) {
   let rotationMatrix = new THREE.Matrix4();
   rotationMatrix.makeRotationAxis(axis.normalize(), angle);
   rotationMatrix.multiply(obj.matrix);
   obj.matrix = rotationMatrix;
   obj.setRotationFromMatrix(obj.matrix);
}

Answer 8

Updated response by @Neil (tested on r98)

function rotateObject(obj, axis, angle) {
   let rotationMatrix = new THREE.Matrix4();
   rotationMatrix.makeRotationAxis(axis.normalize(), angle);
   rotationMatrix.multiply(obj.matrix);
   obj.matrix = rotationMatrix;
   obj.setRotationFromMatrix(obj.matrix);
}

Answer 9

Answer №5

Hey @acarlon, your answer just saved me from a week of frustration. I've tweaked your function a bit and here are my updated versions. Hopefully, this will spare someone else the 20+ hours I spent trying to solve this.

function rotateObjectAroundAxis( obj3D, axis, angle ){

    var euler;

    if ( axis === "x" ){
        euler = new THREE.Euler( angle, 0, 0, 'XYZ' );      
    }

    if ( axis === "y" ){
        euler = new THREE.Euler( 0, angle, 0, 'XYZ' );              
    }

    if ( axis === "z" ){
        euler = new THREE.Euler( 0, 0, angle, 'XYZ' );      
    }
    obj3D.position.applyEuler( euler );
}

function rotateObjectIn3D( obj3D, angles, order = 'XYZ' ){

   var euler;

   euler = new THREE.Euler( angles.x, angles.y, angles.z, order );

   obj3D.position.applyEuler( euler );

}

This code works like a charm in r91. I hope it comes in handy for you too.

Answer 10

Hey @acarlon, your answer just saved me from a week of frustration. I've tweaked your function a bit and here are my updated versions. Hopefully, this will spare someone else the 20+ hours I spent trying to solve this.

function rotateObjectAroundAxis( obj3D, axis, angle ){

    var euler;

    if ( axis === "x" ){
        euler = new THREE.Euler( angle, 0, 0, 'XYZ' );      
    }

    if ( axis === "y" ){
        euler = new THREE.Euler( 0, angle, 0, 'XYZ' );              
    }

    if ( axis === "z" ){
        euler = new THREE.Euler( 0, 0, angle, 'XYZ' );      
    }
    obj3D.position.applyEuler( euler );
}

function rotateObjectIn3D( obj3D, angles, order = 'XYZ' ){

   var euler;

   euler = new THREE.Euler( angles.x, angles.y, angles.z, order );

   obj3D.position.applyEuler( euler );

}

This code works like a charm in r91. I hope it comes in handy for you too.

What is the method for rotating an object on the world axis in three.js?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Avoiding page refresh while utilizing the ng5-slider component in Angular

What is the best way to include a new user in my list of friends within the User schema?

Accessing nested objects within a JavaScript array for an Express API

How to Dynamically Retrieve Keys from JSON Array in Javascript

Storing information as variables in jQuery

Evaluating the generated HTML using JavaScript and Selenium testing

Exploring the process of iterating through and organizing a JavaScript array

Scaling a mesh and BufferGeometry vertices using THREE.OBJLoader

The Three.js duplication tool replicates all mesh data from the original volume and its associated child nodes

Updating the image sources of a group of image tags with a predetermined list

transferring a JavaScript variable to PHP upon submitting a form

Is JSON.stringify failing to function correctly in Mozilla Firefox?

The reset function is malfunctioning on the meteor entity

Is there a way to swap out a div with another using ajax and php?

Guide to incorporating React component with Postgres database

Tips for preloading an image with Vue's built-in tool

Encountering a problem with fetching data in a dropdown using a hidden select in MVC 4 Razor and Selectpicker

What could be the reason for rowsAffected not returning an integer value?

What is the process for building an interactive quiz using JavaScript?

Ways to properly close open HTML tags using node.js?