Three.js Mesh Unexpected Rotation Behaviour (Global not Local Rotation)

Question

I was using Three.js to make a mesh that could be rotated via keyboard controls. However, the mesh was not rotating in the direction I intended, no matter which axes I rotated around.

Specifically, if I rotated the mesh around one axis (Y), then I couldn't get it to rotate around another axis (X) as expected.

Here is the code I used. Specifically note the code to rotate the cube: mesh.rotation.x += 0.03;

var camera, scene, renderer, mesh;

init();
animate();

function init() {
        // Camera setup
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 1, 2, - 2 );
    
    // Scene setup
    scene = new THREE.Scene();
    camera.lookAt( scene.position );

        // Cube Setup
    var geometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
    var material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0.5,0.5,0.5);
    mesh.rotation.y = 0.5;
    scene.add( mesh );
    
    // Add grid and axes
    scene.add( new THREE.GridHelper( 4, 10 ) );
    scene.add( new THREE.AxesHelper() );

        // Add renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
}

function animate() {

    requestAnimationFrame( animate );
    
    // Cube doesn't rotate around local x axis
    mesh.rotation.x += 0.03;
    
    renderer.render( scene, camera );

}

body {
      margin: 0;
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Here is what I tried to debug

I found this question on global rotation vs. local rotation, but the answers used THREE.Group() which I wasn't using.
I found this question on combining global and local rotation, but the answers used rotation matrices which I wasn't using.
I found this question on using the Object3D.rotateOnAxis() method. But that didn't work for my application because the method always created an axis from the origin to the position of my mesh. But I also wanted to translate my mesh to different positions, not just rotate it.

score 0 · Accepted Answer · answered Feb 28 '22 at 14:17

The issue was that I was the code that I used to rotate the cube (mesh.rotation.x += 0.03;) modified the global rotation, not the local rotation.

I instead need to use the Object3D.rotateX() method to rotate an object locally

Here is a JS Fiddle and an updated code snippet with the modified rotation code. Click the button in the top left to compare local vs. global rotation.

var camera, scene, renderer, mesh;
var local = false;

init();
animate();

function init() {
        // Camera setup
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.set( 1, 2, - 2 );
    
    // Scene setup
    scene = new THREE.Scene();
    camera.lookAt( scene.position );

        // Cube Setup
    var geometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
    var material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    mesh.position.set(0.5,0.5,0.5);
    // Note: Until the mesh is rotated, global and local rotation are the same
    mesh.rotation.y = 0.5;
    scene.add( mesh );
    
    // Add grid and axes
    scene.add( new THREE.GridHelper( 4, 10 ) );
    scene.add( new THREE.AxesHelper() );

        // Add renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    // Create rotation toggle button
    var button = document.createElement("button");
    button.innerText = "Local Rotation Off";
    button.onclick = () => {
      local = !local
      if (local) button.innerText = "Local Rotation On";
      else button.innerText = "Local Rotation Off";
    };
    document.body.appendChild(button);
    

}

function animate() {

    requestAnimationFrame( animate );
    
    // This is GLOBAL
    if (!local) mesh.rotation.x += 0.03;
    // This is LOCAL
    else mesh.rotateX(0.03);
    
    renderer.render( scene, camera );

}

body {
      margin: 0;
}

button {
  position: absolute;
  top: 10px;
  left: 10px;
  
}

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Three.js Mesh Unexpected Rotation Behaviour (Global not Local Rotation)

1 Answers1