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
THREE.Group() which I wasn't using.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.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>