Zoom and Pan "unstable" after using Orbitcontrols.target.set

Hi,

I am using Orbitcontrols.target.set(x,y,z) to go to specific co-ordinates of a 3D-Model.

Imagine I have a house and I see the house from an outside view when the model is first loaded.

I then I have a dropdown box which has coordinates for “components” in the house. e.g a chair in the living room.

So when I select the “component” from the dropdown box, I use the Orbitcontrols to “zoom/focus” on those specific co-ordinates. So this will now be inside the house. When I have am inside the house the pan and zoom is super sensitive and I cannot control how the panning and rotating behaves.

Any thoughts on why this might be happening?

the sensitivity is probably due to your camera position and target being very close together or exactly the same.

Use the controls.target to point the camera, and either leave the camera position the same as it was before you changed the target,
or
define a new position several units away from the target along the same normal as the target.
or
predefine some positions and targets into some json that you can retrieve from,
or
many other ways

in this example I predefine the target and camera position for each component in some json that I download from the server and then dynamically create some buttons and clickable annotations.

Example : Annotations - Three.js Tutorials


JavaScript source behind <> button in working example on link.

2 Likes