¿Cómo rotar un objeto 3D en el eje tres.js?

Nuestros programadores estrellas agotaron sus depósitos de café, investigando a tiempo completo por la respuesta, hasta que Paola encontró la solución en Bitbucket y en este momento la comparte aquí.

Solución:

Desde la versión r59, three.js proporciona esas tres funciones para rotar un objeto alrededor del eje del objeto.

object.rotateX(angle);
object.rotateY(angle);
object.rotateZ(angle);

Aquí están las dos funciones que uso. Se basan en rotaciones de matrices. y puede rotar alrededor de ejes arbitrarios. Para rotar usando los ejes del mundo, querrá usar la segunda función “rotateAroundWorldAxis()”.

// Rotate an object around an arbitrary axis in object space
var rotObjectMatrix;
function rotateAroundObjectAxis(object, axis, radians) 
    rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    // object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply
    // new code for Three.JS r55+:
    object.matrix.multiply(rotObjectMatrix);

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js r50-r58:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // new code for Three.js r59+:
    object.rotation.setFromRotationMatrix(object.matrix);


var rotWorldMatrix;
// Rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) 
    rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    // old code for Three.JS pre r54:
    //  rotWorldMatrix.multiply(object.matrix);
    // new code for Three.JS r55+:
    rotWorldMatrix.multiply(object.matrix);                // pre-multiply

    object.matrix = rotWorldMatrix;

    // old code for Three.js pre r49:
    // object.rotation.getRotationFromMatrix(object.matrix, object.scale);
    // old code for Three.js pre r59:
    // object.rotation.setEulerFromRotationMatrix(object.matrix);
    // code for r59+:
    object.rotation.setFromRotationMatrix(object.matrix);

Por lo tanto, debe llamar a estas funciones dentro de su anim (requestAnimFrame callback), lo que resulta en una rotación de 90 grados en el eje x:

var xAxis = new THREE.Vector3(1,0,0);
rotateAroundWorldAxis(mesh, xAxis, Math.PI / 180);

necesitaba el rotateAroundWorldAxis pero el código anterior no funciona con la versión más reciente (r52). Parece que getRotationFromMatrix() fue reemplazado por setEulerFromRotationMatrix()

function rotateAroundWorldAxis( object, axis, radians ) 

    var rotationMatrix = new THREE.Matrix4();

    rotationMatrix.makeRotationAxis( axis.normalize(), radians );
    rotationMatrix.multiplySelf( object.matrix );                       // pre-multiply
    object.matrix = rotationMatrix;
    object.rotation.setEulerFromRotationMatrix( object.matrix );

Reseñas y calificaciones

Finalizando este artículo puedes encontrar las notas de otros desarrolladores, tú además eres capaz insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador