Question

我正在寻找一种有效的互动方式。我基本上需要制作类似谷歌地球风格的设置，你可以：

环绕物体的轨道，突出显示最中心的位置，
单击菜单链接并将对象的旋转设置为特定“位置”（突出显示新位置）。

我正在使用orbitcontrols作为第一位，并且希望直接为轨道控件补充菜单链接位，但无法让相机在正确的路径中移动。所以我将相机放在一个物体内，当轨道控制器处理相机时，补间就完成了对象（'camHolder'）。

因此有两个移动部件（由用户鼠标控制凸轮，camHolder通过链接点击补间到位），当任何一个移动时，它们之间的旋转差异会发生变化。为了突出显示这两个旋转值之间的正确“点”，我需要跟踪两者之间的偏移。基本上（codepen的简化版）：

// -------  MOUSE/CAMERA INTERACTION ---------

// location of points (in radians):
   var pointLongs=[-3,-2,-2.5,-2,-1.5,-1,-0.5,0,1,2,2.5,3];

// most recent point highlighted (by menu click):
   var currentPoint = 5; 

// get diff (in radians) between camera and current point
   var pointDistance = pointLongs[currentPoint] - camera.rotation.y;

// the offset rotation of cam (i.e. whats closest to the front):
   var offset = camera.rotation.y + pointDistance;

// find the closest value to offset in pointLongs array:
   var closest = pointLongs.reduce(function (prev, curr) {
     return (Math.abs(curr - offset) < Math.abs(prev - offset ) ? curr : prev);
   });
   closestPointIndex = pointLongs.indexOf(closest);

// highlight that point (raise it up):
   scene.getObjectByName(pointNames[closestPointIndex]).position.y = 20;

只要pointDistance大于0，这似乎有效，但如果没有，当前“点”的跟踪仅适用于鼠标轨道圆的一部分，当它应该一直工作时。

Codepen在这里：http://codepen.io/anon/pen/BNPWya（唯一的补间代码嵌入在那里，所以跳过第一个块......）。尝试用鼠标旋转形状，并注意点不会一直抬起。单击随机/下一个菜单按钮，“间隙”发生变化......有时它会一直发生变化！

我尝试改变所有的值（pointLongs所有正值;相机的初始旋转等），但我的数学通常很糟糕，而且我已经失去了直接观察的能力 - 任何人都有任何想法？请问一些事情是否有意义！

我会添加标签'HelpMeWestLangleyYoureMyOnlyHope'，但我没有足够的声誉：D

TLDR;物体和相机的旋转不会“同步”，需要纠正差异，还是找到一种方法来补间轨道控制的位置/旋转？

Three.js：轨道控制加相机补间=偏移头痛

0 个答案: