В Three.js, популярной библиотеке JavaScript для 3D-графики, кватернионы часто используются для представления вращения. Кватернионы предоставляют компактный и эффективный способ описания сложных вращений в трехмерном пространстве. Одной из распространенных операций является умножение вектора на кватернион, чтобы применить к вектору вращение. В этой статье мы рассмотрим несколько методов умножения векторов на кватернионы в Three.js, а также приведем примеры кода.

Метод 1: использование метода applyQuaternion
Самый простой способ умножить вектор на кватернион в Three.js — использовать метод applyQuaternion, предоставленный Vector3класс. Вот пример:

const vector = new THREE.Vector3(1, 0, 0); // Create a vector
const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI / 2, 0)); // Create a quaternion representing a 90-degree rotation around the y-axis
vector.applyQuaternion(quaternion); // Apply the rotation to the vector
console.log(vector); // Output the transformed vector

Метод 2: использование функции multiplyQuaternions
Другой метод — использовать функцию multiplyQuaternions, доступную в Three.js. Эта функция умножает два кватерниона и возвращает результат. Вот пример умножения вектора на кватернион с помощью этого метода:

const vector = new THREE.Vector3(1, 0, 0); // Create a vector
const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI / 2, 0)); // Create a quaternion representing a 90-degree rotation around the y-axis
const resultQuaternion = new THREE.Quaternion().multiplyQuaternions(quaternion, vector); // Multiply the quaternion and vector
const resultVector = new THREE.Vector3(); // Create a new vector to store the result
resultVector.setFromQuaternion(resultQuaternion); // Convert the quaternion back to a vector
console.log(resultVector); // Output the transformed vector

Метод 3: использование матричных преобразований
В Three.js вы также можете использовать матричные преобразования для умножения вектора на кватернион. Этот метод включает в себя создание матрицы преобразования 4×4 из кватерниона и последующее умножение вектора на матрицу. Вот пример:

const vector = new THREE.Vector3(1, 0, 0); // Create a vector
const quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI / 2, 0)); // Create a quaternion representing a 90-degree rotation around the y-axis
const matrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion); // Create a transformation matrix from the quaternion
vector.applyMatrix4(matrix); // Apply the matrix transformation to the vector
console.log(vector); // Output the transformed vector

Умножение векторов на кватернионы — фундаментальная операция в Three.js для применения вращения. В этой статье мы рассмотрели три метода достижения этой цели, в том числе использование метода applyQuaternion, функции multiplyQuaternionsи матричных преобразований. В зависимости от вашего конкретного случая использования вы можете выбрать метод, который лучше всего соответствует вашим потребностям. Поэкспериментируйте с этими методами, чтобы создавать потрясающие 3D-анимации и визуализации в Three.js!