Three.js在曲线上定位对象 - 朝向圆心

Question

我正在尝试创建一个时髦的VR菜单，以便当用户向下看时，菜单项位于相机下方的一列中，它围绕圆形弯曲，因此它们看起来相同并且朝向相机旋转。

这是我到目前为止的尝试

带有示例的CodePen http://codepen.io/bknill/pen/BLOwLj?editors=0010

我正在使用我发现的一些代码来计算位置

   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);

})

这几乎是正确的，下一个阶段是让它们以均匀的方式朝向相机旋转。使用menuItem.lookAt（camera.position）不起作用 - 它们不是均匀旋转。

child.lookAt（camera.position.normalize（））这样做

任何人都让我知道我需要聪明的数学来获得物品的旋转，以便他们面对相机并看起来像是在曲线上？

Answer 1

让对象面对另一个对象的最简单方法是使用lookAt。

请注意，此方法需要方向向量，而不是您希望它查看的点。

  

（你要看的位置 - 对象的位置）.normalize（）;

在你的情况下：

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

基于Vector3 documentation的操作。

有关详情，请阅读the last discussion I had about this method。