Three.js Position Objekte auf der Kurve - drehen in Richtung Zentrum des Kreises

Question

Ich versuche, ein snazzy VR-Menü zu schaffen, so dass wenn der Benutzer nach unten schaut die Menüpunkte in einer Spalte unter der Kamera gekrümmt um Kreis, so dass sie gleich aussehen und werden in Richtung Kamera gedreht.

Hier ist mein Versuch, so weit

Und ein CodePen mit dem Beispiel http://codepen.io/bknill/pen/BLOwLj?editors=0010

ich einige Code verwende ich festgestellt, dass die Position

var radius = 60; // radius of the circle 
    var height = 60, 
     angle = 0, 
     step = (Math.PI /2)/menuItems.length; 

menuItems.forEach(function(item,index){ 

    var menuItem = createMenuItem(item.title); 
     menuItem.position.y = - Math.round(height/2 + radius * Math.sin(angle)); 
     menuItem.position.z = Math.round(height/2 + radius * Math.sin(angle)); 
     // menuItem.rotation.x = -Math.round(Math.PI * Math.sin(angle)); 
    angle += step; 
    menu.add(menuItem); 

}) 

die fast ist berechnet Richtig, die nächste Stufe besteht darin, dass sie sich gleichmäßig in Richtung Kamera drehen. Die Verwendung von menuItem.lookAt (camera.position) funktioniert nicht - sie sind keine einheitliche Rotation.

child.lookAt (camera.position.normalize()) tut dies

Jeder lassen Sie mich wissen die klugen Mathematik Ich brauche die Drehung des Elements zu erhalten, damit sie die Kamera zeigen und schauen, wie sie‘ Re auf einer Kurve?

Answer 1

Die einfachste Möglichkeit, ein Objekt einem anderen Objekt zuzuordnen, ist lookAt.

Beachten Sie, dass diese Methode einen Richtungsvektor benötigt, nicht den Punkt, an dem sie angezeigt werden soll.

(Position, die Sie anzeigen möchten - Position Ihres Objekts) .normalize();

In Ihrem Fall:

var dirToLookAt = new THREE.Vector3(); 
dirToLookAt.subVectors(menuItem.position, camera.position); 
// could be: dirToLookAt.subVectors(camera.position, menuItem.position); 
dirToLookAt.normalize(); 

Operationen basierend auf Vector3 documentation.

Für weitere Informationen können Sie lesen the last discussion I had about this method.