Estaba usando Three.js para hacer una malla que pudiera girarse a través de los controles del teclado. Sin embargo, la malla no giraba en la dirección que pretendía, sin importar los ejes alrededor de los cuales giraba.
Específicamente, si giraba la malla alrededor de un eje (Y), entonces no podía hacer que girara alrededor de otro eje (X) como se esperaba.
Aquí está el código que usé. Tenga en cuenta específicamente el código para rotar el cubo: 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>Esto es lo que traté de depurar
THREE.Group() que no estaba usando.Object3D.rotateOnAxis() . Pero eso no funcionó para mi aplicación porque el método siempre creaba un eje desde el origen hasta la posición de mi malla. Pero también quería trasladar mi malla a diferentes posiciones, no solo rotarla.El problema era que yo era el código que usaba para rotar el cubo ( mesh.rotation.x += 0.03; ) modificaba la rotación global, no la rotación local.
En su lugar, necesito usar el método Object3D.rotateX() para rotar un objeto localmente
Aquí hay un JS Fiddle y un fragmento de código actualizado con el código de rotación modificado. Haga clic en el botón en la parte superior izquierda para comparar la rotación local con la global.
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>