Three.js: как вращать объект вокруг собственного центра, а не мирового центра

Чтобы повернуть объект вокруг собственного центра, а не мирового центра в Three.js, вы можете использовать следующие методы:

  1. Перенос точки поворота. Вы можете перевести положение объекта в его центральную точку, применить поворот, а затем перевести его обратно в исходное положение. Это гарантирует, что вращение происходит вокруг центра объекта. Вот пример фрагмента кода:
// Translate to object's center
object.position.x -= object.geometry.boundingSphere.center.x;
object.position.y -= object.geometry.boundingSphere.center.y;
object.position.z -= object.geometry.boundingSphere.center.z;
// Apply rotation
object.rotation.x += 0.01; // Example rotation
object.rotation.y += 0.01;
object.rotation.z += 0.01;
// Translate back to original position
object.position.x += object.geometry.boundingSphere.center.x;
object.position.y += object.geometry.boundingSphere.center.y;
object.position.z += object.geometry.boundingSphere.center.z;
  1. Иерархия объектов: вы можете создать родительский объект и установить дочерний объект как дочерний по отношению к родительскому. Затем выполните поворот родительского объекта вместо дочернего. Таким образом, дочерний объект вращается вокруг центра родительского. Вот пример фрагмента кода:
var parentObject = new THREE.Object3D();
parentObject.add(childObject);
// Apply rotation
parentObject.rotation.x += 0.01; // Example rotation
parentObject.rotation.y += 0.01;
parentObject.rotation.z += 0.01;
  1. Вращение кватернионов: вы можете использовать кватернионы для вращения вокруг центра объекта. Кватернионы обеспечивают более точный контроль вращения. Вот пример фрагмента кода:
var pivot = new THREE.Vector3(
  object.geometry.boundingSphere.center.x,
  object.geometry.boundingSphere.center.y,
  object.geometry.boundingSphere.center.z
);
var quaternion = new THREE.Quaternion().setFromAxisAngle(axis, angle);
object.position.sub(pivot);
object.position.applyQuaternion(quaternion);
object.position.add(pivot);