Three.js: orbitcontrols плюс анимация камеры = смещенные головные боли

Меня слегка сводит с ума в поисках рабочей комбинации взаимодействий. Мне нужно сделать что-то вроде настройки стиля Google Earth, где вы можете:

  1. вращаться вокруг объекта, выделяя самое центральное место,
  2. щелкните ссылку меню и анимируйте вращение объекта в определенном "месте" (выделяя новое местоположение).

Я использую orbitcontrols для первого бита, и надеялся настроить анимацию orbitcontrols непосредственно для бита ссылки меню, но не смог заставить камеру двигаться в правильном направлении. Поэтому я помещаю камеру внутри объекта, и пока управление орбитой управляет камерой, вместо этого выполняется анимация движения на объекте ("camHolder").

Таким образом, есть две движущиеся части (кулачок, управляемый мышью пользователя, camHolder, перемещаемый в положение с помощью щелчков по ссылкам), и когда любой из них перемещается, разница в вращении между ними изменяется. Чтобы выделить правильную "точку" между этими двумя значениями вращения, мне нужно отслеживать смещение между этими двумя значениями. В основном (упрощенная версия кодекса):

// -------  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; вращение объекта и камеры не синхронизируется, вам нужно либо исправить разницу, либо, возможно, найти способ изменения положения / поворота элементов управления орбитой?

0 ответов

Другие вопросы по тегам