Pivot camera around object on drag (ThreeJS)

Questions
,
1

In my three.js scene I have an object with the {x: 0, y:0 z:-150} . My camera has a position of {x:0, y:0, z:75); . What I want is that the user can drag the camera around the object, so that the user keeps looking at the object.

rotation

The camera needs to follow the given circle stroke on a drag to the left or to the right.

I tried to use OrbitControls and a pivotPoint to get this result:

    const controls = new OrbitControls( camera, renderer.domElement );
    controls.update();
             
    object.position.set(0, 0, -150);
    pivotPoint = new THREE.Object3D();
    object.add(pivotPoint);

    camera.position.set(0, 0, 75);
    camera.lookAt(object.position);

The problem I have now is that the camera rotates around itself and not around the object.

2

Try using Object3D.getWorldPosition vector instead of .position - since you seem to be doing some pivot-transformation magic.

Also, just take a look at this little boilerplate - it has barely anything besides a cube and OrbitControls. Make sure you’re handling controls in a similar fashion - ie. set controls.lookAt only once (change only when changing target object, or whenever object changes its position.)

If it still won’t work - could you recreate your issue on jsfiddle or codepen?

3

I think you have to do pivotPoint.add(object) instead of object.add(pivotPoint) or am I wrong?

Also use controls.update() after the above code

You could also try to use controls.target.set(object.position) instead of camera.lookAt(...). Not sure if this makes a difference

4

Already answered here: