Three.js: orbitcontrols plus camera tweens = offset headaches

问题

I'm being driven mildly insane looking for a working combination of interactions. I basically need to make something like a google earth style setup, where you can:

orbit round an object, highlighting the centre-most location,
click a menu link and animate rotation of the object to a particular 'location' (highlighting the new location).

I'm using orbitcontrols for the first bit, and was hoping to tween the orbitcontrols directly for the menu link bit, but couldn't get the camera to move in the right path. SO I put the camera inside an object, and whilst orbitcontrols handles the camera, the tweening is done on the object ('camHolder') instead.

So there are two moving parts (cam controlled by user's mouse, camHolder tweened into position by link clicks), and when either one moves, the rotational difference between them changes. In order to highlight the right 'point' between these two rotation values, I need to keep track of the offset between the two. Basically (simplified version of the 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;

This seems to work as long as pointDistance is above 0, but if not, the tracking of the current 'point' only works on part of the mouse orbiting circle, when it should work all the way round.

Codepen here: http://codepen.io/anon/pen/BNPWya (the Sole tween code is embedded in there so skip the first chunk...). Try rotating the shape with the mouse, and notice that the points aren't raised all the way around. Click the random / next menu buttons, and the 'gap' changes... Sometimes it does go all the way round!

I've tried changing just about all the values (pointLongs all positive values; initial rotation of camera, etc) but my maths is generally terrible, and I've lost the ability to see straight - anyone have any ideas? Please ask if something doesn't make sense!

I'd add the tag 'HelpMeWestLangleyYoureMyOnlyHope' but I don't have enough reputation :D

TLDR; rotation of object and camera won't 'sync', need to either correct the difference, or maybe find a way to tween position/rotation of orbitcontrols?

来源：https://stackoverflow.com/questions/31477683/three-js-orbitcontrols-plus-camera-tweens-offset-headaches

标签

javascript

jquery

three.js

tween.js