Three.js - Wie man ein Objekt dreht, um einen Punkt zu sehen und sich in Richtung eines anderen zu orientieren

Question

Ich bin neu bei three.js und 3D-Programmierung im Allgemeinen, so dass dies wie eine sehr einfache Frage scheint. Im Idealfall hoffe ich, dass die Antwort mir helfen kann, die zugrunde liegenden Prinzipien zu verstehen.

Ich habe ein Objekt, das an einem anderen Punkt "zeigen" muss (der Ursprung, in diesem Fall der Einfachheit halber), was einfach mit der Object3D.lookAt(point) Funktion getan werden kann. Dies zeigt die Z-Achse des Objekts an der Stelle schön an.

Ich möchte auch mein Objekt, genannt looker, um seine Z-Achse so drehen, dass seine X-Achse allgemein auf ein anderes Objekt zeigt, refObj. Ich weiß, dass die X-Achse nicht direkt auf die refObj zeigen kann, es sei denn, das Objekt passiert einen rechten Winkel mit dem Ursprung. Ich mag die X-Achse von looker auf der Ebene von origin erstellt liegen, refObj und looker, wie nachstehend graphisch dargestellt:

Der einfachste Weg, um die Drehung zu tun scheint zu sein looker.rotation.z zu ändern, aber ich Ich weiß nicht, wie ich den Wert berechnen soll.

Im Allgemeinen möchte ich eine erweiterte Version der lookAt Funktion, die eine zweite Koordinate nimmt, auf der die X-Achse ausgerichtet wäre. Etwas wie folgt aus:

function lookAtAndOrient(objectToAdjust, pointToLookAt, pointToOrientXTowards) 
{ 
    // First we look at the pointToLookAt 
    objectToAdjust.lookAt(pointToLookAt); 

    // Then we rotate the object 
    objectToAdjust.rotation.z = ??; 
} 

ich ein jsFiddle with the example diagramed above

Answer 1

erstellt haben, was Sie wirklich sagen, ist, dass Sie die y-Achse des Objekts wollen (die up -vector des Objekts), die senkrecht zur Ebene sein.

Alles, was Sie tun müssen, ist das Objekt up-Vektor, bevor Sie lookAt(origin) aufrufen.

Sie berechnen den gewünschten up Vektor, indem Sie ein Kreuzprodukt von zwei Vektoren nehmen, von denen Sie wissen, dass sie in der Ebene liegen.

Hier ist ein funktionierendes Geige: http://jsfiddle.net/rQasN/43/

Hinweis, dass es zwei Lösungen für Ihr Problem, sowohl als der berechneten Vektor und es ist wird Negation auf der Ebene orthogonal sein.

EDIT: fiddle aktualisiert zu three.js r.71