Поворот объектов вокруг глобальных и локальных осей в 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 не такая уж и сложная задача. Использование обеих функций наглядно продемонстрировано в приведенном ниже примере.
Добавить комментарий