Three.js: orbitcontrols плюс анимация камеры = смещенные головные боли
Меня слегка сводит с ума в поисках рабочей комбинации взаимодействий. Мне нужно сделать что-то вроде настройки стиля Google Earth, где вы можете:
- вращаться вокруг объекта, выделяя самое центральное место,
- щелкните ссылку меню и анимируйте вращение объекта в определенном "месте" (выделяя новое местоположение).
Я использую 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; вращение объекта и камеры не синхронизируется, вам нужно либо исправить разницу, либо, возможно, найти способ изменения положения / поворота элементов управления орбитой?