Three.js: smooth camera lerping around an origin point

Question

I'm working on a three.js scene which renders a cube at the centre of two lines pointing north, east, south and west. I'm using three OrbitControls for interaction and some custom code (see link below) to smoothly lerp the camera around an origin point to predefined positions (N, E, S, W and top).

This is working well, except for a few cases:

Lerp from north to south by clicking the "North" button then "South" button (same issue for east to west). Lerping between vector A and B fails, resulting in the camera just jumping to vector B.
Lerp from a custom rotation e.g. NW to the top down view by clicking the "Top" button. The camera lerps correctly to the vector on the y axis, but since it's rotation isn't being controlled, it snaps to the final camera rotation when the lerping is done.

Is there a better way to handle this smooth transition of a camera around an origin point on a circular path from a current vector to a target vector? Which also works for cases 1 and 2 above.

Here's a link to my CodePen three.js scene so far. Upon clicking a position button, I store the target vector and use the following line to lerp towards the target

camera.position.lerp(cameraTarget, cameraLerpAlpha);

Daryll Daryll · Accepted Answer · 2019-03-29T17:36:55

lerp is not sure how to orbitally rotate around that center point. For a quick fix, slightly offset position in lines 4-8 (or when the animation starts) to give it a direction to send it off on:

//notice the 0.1s
n: new THREE.Vector3(0, 0.1, -5),
e: new THREE.Vector3(5, 0.1, 0),
s: new THREE.Vector3(0, 0, 5),
w: new THREE.Vector3(-5, 0, 0),
top: new THREE.Vector3(0, 5, 0.1)

But really you need to look at this answer and use a quaternion slerp rather than lerp if you want it to not be locked by distance to the center point: threejs: smoothly rotate camera towards an object

Three.js: smooth camera lerping around an origin point

1 Answers