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。