Three.js - вращение сферы вокруг определенной оси

У меня проблема. В Three.js я хочу повернуть сферу (Землю) вокруг оси, наклонной на 23,5 град. Я нашел сферу .rotation.x, sphere.rotation.y и sphere.rotation.z, но когда я их совмещаю в правильном соотношении, вращение сферы довольно странно - у него нет постоянной оси вращения. Я думаю, мне нужна функция, например sphere.rotation.vector(1,0, -1). Кто-нибудь знает, как эта функция вызывается и как выглядит правильный синтаксис?

Большое спасибо за ответы!

Ответ 1

Для этого вам нужно использовать quaternions. Это видео объясняет, что такое кватернионы и как они используются в 3D-графике.

Вы можете построить кватернион следующим образом:

quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );

Затем вы примените его к своему объекту:

object.rotation.setEulerFromQuaternion( quaternion );

Вы также можете достичь этого, используя иерархии объектов. Например, вы можете создать экземпляр Object3D() и направить его на 23,5 град, затем создать сферу (Земля) и добавить ее к наклонному объекту. Сфера затем повернется вокруг наклонной оси Y. Кватернионы, однако, являются лучшим инструментом для решения этого вопроса.

Ответ 2

Вам не нужно понимать, как углы Эйлера или кватернионы работают, чтобы делать то, что вы хотите. Ты можешь использовать

Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );

Убедитесь, что axis является единичным вектором (имеет длину 1), а angle в радианах.

Object3D.rotateOnAxis( axis, angle ) вращается на оси в пространстве объектов.

Object3D.rotateOnWorldAxis( axis, angle ) вращается на оси в мировом пространстве.

three.js r.104

Ответ 3

var quaternion = new THREE.Quaternion();
var object = scene.getObjectByName('xxx');
function render(){
    quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005);
    object.position.applyQuaternion(quaternion);
}

версия three.js - 86, см. полный пример кода..

Ответ 4

Вы можете вращать свою сферу, используя модуль 'ObjectControls' для ThreeJS, который позволяет вращать один ОБЪЕКТ (или Группу), а не СЦЕНУ.

Включить библиотеку:

затем

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

Вы можете найти здесь живую демонстрацию здесь: https://albertopiras.github.io/threeJS-object-controls/

Вот репо: https://github.com/albertopiras/threeJS-object-controls.

Надеюсь это поможет