I’m currently working on a project in JavaScript using thee.js.

It’s a simple project, just a model of a solar system, with orbits and rotations.

What I want to do is make the camera follow one of the planets with a set distance initially while still being allowed to rotate and zoom in and out. I’ll add this function to a button on dat.gui. So the user can decide to lock on to any of the planets they wish

Ideally I want do do this in a way that you can then unlock the camera once you are done viewing the planet, and continue looking around the solar system.

I’ve looked at the documentation on OrbitControls and found a target property. I tried setting this to world position of the mesh I want to follow and doing that in the animation loop like so:

//Part of a Plant class with a attribute 'mesh'
//CONTROLS is the OrbitControls object
lockOn(){
    const worldPos = new THREE.Vector3();
    this.mesh.getWorldPosition(worldPos);
    CONTROLS.target = worldPos;
}

//in the main script

//jupiter is an instance of the planet class
function animate(){
    jupiter.lockOn();
    CONTROLS.update();
    RENDERER.render(SCENE, CAMERA);
}

RENDERER.setAnimationLoop(animate);

This more or less achieves what I want. The orbit point of the camera is locked to the position of the mesh, but the distance of the camera from the mesh is not constant, so the camera follows the planet and can orbit it but the planet gets further and closer away from the camera.

How can I go about setting a fixed distance from the camera to the mesh using OrbitControls and is this even possible?