Three.js position objects on curve - rotate towards center of circle

Question

I'm attempting to create a snazzy VR menu so that when the user looks down the menu items are in a column below camera curved around circle so they look the same and are rotated towards camera.

Here is my attempt thus far

And a CodePen with the example http://codepen.io/bknill/pen/BLOwLj?editors=0010

I'm using some code I found that calculates the 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);

})

Which is almost right, the next stage is to get them to rotate in a uniform way towards the camera. Using menuItem.lookAt(camera.position) isn't working - they're not uniform rotation.

child.lookAt(camera.position.normalize()) does this

Anyone let me know the clever maths I need to get the rotation of the item so they face the camera and look like they're on a curve?

Answer 1

The simplest way to have an object facing another object is using lookAt .

Be aware this method needs a direction vector, not the point where you want it to look at.

(position you want to look at - position of your object).normalize();

In your case:

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

Operations based on Vector3 documentation .

For more info you can read the last discussion I had about this method .