I'm working on developing a sleek VR menu that presents menu items in a curved column below the camera as the user looks down. The challenge is to have the items rotated towards the camera while appearing uniform.
Here's what I've come up with so far https://i.sstatic.net/HmJkG.png
For a live example, you can check out this CodePen demo http://codepen.io/bknill/pen/BLOwLj?editors=0010
I found some code that helps calculate the position of the menu items
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);
})
While this setup is almost there, the next step is to make sure the items rotate uniformly towards the camera. Simply using menuItem.lookAt(camera.position) doesn't produce the desired effect.
Instead, child.lookAt(camera.position.normalize()) achieves the desired rotation https://i.sstatic.net/L1O72.png
If anyone can enlighten me on the mathematical approach needed to ensure the items face the camera and maintain their curved appearance, please do share your insights.