three.js mesh tilt instead of rotate

Question

I just learned about the THREE.js and am fascinated with it's abilities. I am no where advanced enough to write my own code so I have been browsing around trying to find an example to do exactly what I need or close to but so far with no avail :(

What I am working with is some code that moves an object by using the mouse. The X axis works prefectly but the Y axis rotates around the object instead of tilts it left and right.

My current code :

 var container, stats; var camera, scene, renderer; var group, text, plane; var targetRotationX = 0; var targetRotationOnMouseDownX = 0; var targetRotationY = 0; var targetRotationOnMouseDownY = 0; var mouseX = 0; var mouseXOnMouseDown = 0; var mouseY = 0; var mouseYOnMouseDown = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; var finalRotationY var center init(); animate(); function init() { camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 10000 ); camera.position.z = 1000; camera.eulerOrder = "YXZ" scene = new THREE.Scene(); // lights light = new THREE.DirectionalLight( 0xffffff ); light.position.set( 1, 1, 1 ); scene.add( light ); light = new THREE.DirectionalLight( 0x002288 ); light.position.set( -1, -1, -1 ); scene.add( light ); light = new THREE.AmbientLight( 0x222222 ); scene.add( light ); var geometry = new THREE.BoxGeometry(1400, 100, 700, 10, 10, 10); var material = new THREE.MeshBasicMaterial({color: 0xfffff, wireframe: true}); var cube = new THREE.Mesh(geometry, material); //cube.position.set( center.x, center.y, center.z ); //cube.geometry.applyMatrix(new THREE.Matrix4().makeTranslation( -center.x, -center.y, -center.z ) ); renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); container = document.getElementById( 'container' ); container.appendChild( renderer.domElement ); group = new THREE.Object3D(); group.add(cube) scene.add(group); // renderer //stats = new Stats(); //stats.domElement.style.position = 'absolute'; //stats.domElement.style.top = '0px'; //container.appendChild( stats.domElement ); document.addEventListener( 'mousedown', onDocumentMouseDown, false ); document.addEventListener( 'touchstart', onDocumentTouchStart, false ); document.addEventListener( 'touchmove', onDocumentTouchMove, false ); // window.addEventListener( 'resize', onWindowResize, false ); //for debuging stats interval = setInterval( debugInfo, 50 ); } function modelLoadedCallback(geometry) { mesh = new THREE.Mesh( geometry, material ); group.add(mesh); scene.add( group ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // function onDocumentMouseDown( event ) { event.preventDefault(); document.addEventListener( 'mousemove', onDocumentMouseMove, false ); document.addEventListener( 'mouseup', onDocumentMouseUp, false ); document.addEventListener( 'mouseout', onDocumentMouseOut, false ); mouseXOnMouseDown = event.clientX - windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.clientY - windowHalfY; targetRotationOnMouseDownY = targetRotationY; } function onDocumentMouseMove( event ) { mouseX = event.clientX - windowHalfX; mouseY = event.clientY - windowHalfY; targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02; targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02; } function onDocumentMouseUp( event ) { document.removeEventListener( 'mousemove', onDocumentMouseMove, false ); document.removeEventListener( 'mouseup', onDocumentMouseUp, false ); document.removeEventListener( 'mouseout', onDocumentMouseOut, false ); } function onDocumentMouseOut( event ) { document.removeEventListener( 'mousemove', onDocumentMouseMove, false ); document.removeEventListener( 'mouseup', onDocumentMouseUp, false ); document.removeEventListener( 'mouseout', onDocumentMouseOut, false ); } function onDocumentTouchStart( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY; targetRotationOnMouseDownY = targetRotationY; } } function onDocumentTouchMove( event ) { if ( event.touches.length == 1 ) { event.preventDefault(); mouseX = event.touches[ 0 ].pageX - windowHalfX; targetRotationX = targetRotationOnMouseDownX + ( mouseX - mouseXOnMouseDown ) * 0.05; mouseY = event.touches[ 0 ].pageY - windowHalfY; targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.05; } } // function animate() { requestAnimationFrame( animate ); render(); //stats.update(); } function render() { //horizontal rotation group.rotation.y += ( targetRotationX - group.rotation.y ) * 0.1; finalRotationY = (targetRotationY - group.rotation.x); if (group.rotation.x <= 1 && group.rotation.x >= -1) { group.rotation.x += finalRotationY * 0.1; } if (group.rotation.x > 1) { group.rotation.x = 1 } else if (group.rotation.x < -1) { group.rotation.x = -1 } renderer.render( scene, camera ); } function debugInfo() { //$('#debug').html("mouseX : " + mouseX + " mouseY : " + mouseY + "</br>") } 

 <style>canvas { width: 100%; height: 100% }</style> 

 <script src="http://threejs.org/build/three.min.js"></script> <div id="container"></div> 

What I was hoping to do is when the mouse is clicked and moving either left or right, the box will tilt towards the mouse and keep the same "X" rotation unless the mouse is moving up or down as well. Right now, the camera seems to rotate around the object instead of tilt in the corresponding direction.

Any ideas?

Answer 1

micnil was right and I had to change the rotation order to "ZYX". Now off to learning how to join my 2 scripts together.