it-swarm.com.de

Three.js - Eine Kugel um eine bestimmte Achse drehen

Ich habe ein Problem. In Three.js möchte ich eine Kugel (Erde) um eine um 23,5 Grad geneigte Achse drehen. Ich habe sphärendrehung.x, sphärendrehung.y und sphärendrehung.z gefunden, aber wenn ich sie im richtigen Verhältnis kombiniere, ist die Drehung der Kugel ziemlich seltsam - sie hat keine permanente Drehachse. Ich denke, ich brauche eine Funktion wie sphere.rotation.vector (1,0, -1). Weiß jemand, wie diese Funktion aufgerufen wird und wie die korrekte Syntax lautet?

Vielen Dank für die Antworten!

13
karlosss

Sie müssen dazu quaternions verwenden. Dieses Video erklärt, was Quaternionen sind und wie sie in 3D-Grafiken verwendet werden.

Sie können eine Quaternion wie folgt erstellen:

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

Dann wenden Sie es auf Ihr Objekt an, indem Sie:

object.rotation.setEulerFromQuaternion( quaternion );

Dies können Sie auch über Objekthierarchien erreichen. Sie können beispielsweise eine Object3D() -Instanz erstellen und um 23,5 Grad neigen, dann eine Kugel (Erde) erstellen und dem geneigten Objekt hinzufügen. Die Kugel dreht sich dann um die gekippte Y-Achse. Quaternionen sind jedoch das beste Werkzeug, um dies zu lösen.

18
Aki

Sie müssen nicht verstehen, wie Euler-Winkel oder -Quaternionen funktionieren, um das zu tun, was Sie wollen. Sie können verwenden

Object3D.rotateOnAxis( axis, angle );

Stellen Sie sicher, dass axis ein Einheitsvektor ist (Länge 1) und angle im Bogenmaß ist.

Object3D.rotateOnAxis( axis, angle ) dreht sich um eine Achse im Objektraum.

three.js r.67

25
WestLangley
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);
}

die Version von three.js ist 86, siehe Vollständiges Beispiel für codepen .

1
luics

Sie können Ihre Kugel mit dem Modul 'ObjectControls' für ThreeJS drehen, mit dem Sie ein einzelnes OBJEKT (oder eine Gruppe) und nicht die SZENE drehen können.

Schließen Sie die Bibliothek ein:

dann

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

Eine Live-Demo finden Sie hier: https://albertopiras.github.io/threeJS-object-controls/

Hier ist das Repo: https://github.com/albertopiras/threeJS-object-controls .

Hoffe das hilft

0
Alberto Piras