Can OrbitControls rotate around a given point?

Questions
1

Can OrbitControls achieve the following effect?

At the beginning, it rotates around the center point of the model. Later, I want to change the center of rotation, such as rotating based on the intersection between the mouse and the model.

1. Model centered at (0, 0, 0). Camera looking at (0, 0, 0).
model-center

2. Camera orbits around (0, 0, 0).
around-center

3. User clicks a part of the model, i.e. finger (in green). Camera does not move … still looking at (0, 0, 0).
model-finger

4. Camera now orbits around a different point, i.e. finger’s centerpoint.
around-finger

5. Model after trucking camera.
model-truck

6. Camera still orbits around the finger’s centerpoint.
around-finger-truck

2

99% sure that the built-in OrbitControls have look at the point they orbit around (they automatically point at the current target on each frame.)

3

try GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features. it is very easy and fluid to do it there. i don’t think OC can do that without turmoil.

these are react demos using it but it’s also just using the vanilla lib (double click a shape):

the api call is just this: controls.fitToBox(targetVec), you can also setTarget and setLookat, all of these methods can transition with animation.

4

@drcmda Thank you for your reply. camera-controls is a good library. I previously used the setOrbitPoint method from camera-controls to achieve the functionality mentioned above. However, there was a strange bug when using it together with dollyToCursor. I don’t understand the mathematical logic behind camera controllers, so I couldn’t solve the problem. I could only seek how OrbitControls can achieve the corresponding functionality. https://github.com/yomotsu/camera-controls/issues/424)

5

Thank you for your reply. So far, I have not found a way to modify the rotation center in OrbitControls.

6

I had similar issues with OrbitControls and the Camera Controls library. I was not able to get either to work so I made my own. It allows for dolly/zoom to cursor with a fixed orbit/pivot point. The orbit point can be updated programmatically by selecting an object. I have an example that does what I think you are asking for.

Pivot Picking Example
npm package