How to prevent zooming in on inside of object

Questions
#1

I’m just getting started using three.js.

The teapot example contains a camera that can zoom in on the object. Is there a way to lock the camera so that it can only zoom in to a certain distance of the teapot, without going ‘inside’ the teapot?

#2

Hello danielsoutar,

Plz confirm that when you are talking about the “teapot example”, you are refering to this example https://threejs.org/examples/?q=teap#webgl_geometry_teapot, which uses the “OrbitControls.js” library (https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js). If this is the case, you can easely configure the following member variables to suit your needs:

this.minDistance = 0;
this.maxDistance = Infinity;

You can do the configuration right after the controls instance declaration i.e.:

cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
cameraControls.minDistance=20; /*TODO: set to the floor/min value you want*/

Hope this is what you were looking for!

#3

That’s fantastic, and yes that’s what I was referring to.

The only remaining issue is that I realised the scene centres around the teapot. Let’s say I had two objects that I rendered. If I wanted to say that the camera can only go so close to either of those two objects, would I need to use some kind of offset for the camera and if so, where would THAT code go?

#4

Re danielsoutar,

I am glad we have it pinned out!

For the discourse organization sake, please close this question and write a new post; Then, it will be easier for others with the same challenge to retrieve and understand the info.

Cordially,
inf1n1t

1 Like