Поворот объектов вокруг глобальных и локальных осей в Three.js

Практически любое приложение на Three.js не обходится без необходимости повернуть тот или иной объект на произвольный угол вокруг собственной оси, либо вокруг глобальных осей сцены.

Первая задача — вращение объекта вокруг локальных осей координат — решается достаточно просто. В большинстве случает у объекта доступно свойство rotation, которое имеет три компоненты x, y и z, каждая из которых отвечает за вращение вокруг соответствующей оси, проходящей через центр объекта.

Например, поворот объекта вокруг оси Y на 180 градусов будет выглядеть следующим образом:

object.rotation.y = Math.PI;

То же самое можно выполнить, воспользовавшись функцией поворота, основанной на использовании матрицы преобразований:

var rotateAroundObjectAxis = function(object, axis, radians) {
    rotObjectMatrix = new THREE.Matrix4();
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);                
    object.matrix.multiply(rotObjectMatrix);
    object.rotation.setFromRotationMatrix(object.matrix);
}
...
rotateAroundObjectAxis(object, new THREE.Vector3(0,1,0), Math.PI/4);

Вторая задача — поворот объекта вокруг глобальных осей координат — решается уже в два шага. В функции представленной ниже, сначала всё так же производится вращение самого объекта, а затем присвоение ему новых координат.

var rotateAroundWorldAxis = function(object, axis, radians) {
    var rotWorldMatrix = new THREE.Matrix4();
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);

    var currentPos = new THREE.Vector4(object.position.x, object.position.y, object.position.z, 1);
    var newPos = currentPos.applyMatrix4(rotWorldMatrix);

    rotWorldMatrix.multiply(object.matrix);
    object.matrix = rotWorldMatrix;
    object.rotation.setFromRotationMatrix(object.matrix);

    object.position.x = newPos.x;
    object.position.y = newPos.y;
    object.position.z = newPos.z;
};
...
rotateAroundWorldAxis(object, new THREE.Vector3(0,1,0), Math.PI/4);

Как видите, повернуть объект во Three.js не такая уж и сложная задача. Использование обеих функций наглядно продемонстрировано в приведенном ниже примере.