Search code examples
javascriptthree.js3dcameradrag

Pivot camera around object on drag

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.

enter image description here

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.

Solution

  • Try it like so:

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

object.position.set(0, 0, -150);

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(object.position);
controls.update();

    The idea of the above code is to make use of the target property of OrbitControls which represents the focus point. There is no need to manually call lookAt() on the camera object.