Window Zoom in Three JS

Hi there!
I’m new to three js. I want implement a functionality like when we draw a rectangle in the screen the scene should get zoomed to that rectangle. Like “window-zoom” in other 3D applications. Could someone help me out of it? Is there any in-built option available to achieve this?

Thanks for helping.

Are you using plain three or a framework?

I’m using plain three js library. Not any framework.

There’s quite a lot of resources on how to achieve this, have a look into this thread for instance, the entire thread is quite useful…

Thanks for your response. I actually saw this thread, but here it using objects to calculate the boundingbox. In my case, the window can be drawn any part of the window. Even there is no objects, that part should get zoomed.

Ah I see what you mean now you want a sort of “zoom box” behaviour? Is this SO question similar to what you’re after? It’s incomplete but you can get a rough idea of how the basics of this would work playing with the following pen…

1 Like

There, in fact, is - see this method

1 Like

Yeah. I was searching this. Thanks for the reference.

I’ll try this. Thanks for your response :+1:

That’s cool, very interesting!

i would suggest you use this library GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

this is a better orbit control, it can replace it entirely and it has that functionality inbuild. look for fitToBox.

the problem with these approaches above, in my experience, is that they’re often (always?) half cooked. i tried all of them and they work in a theoretical manner but failed in the real world. if you have a control they fail because they can’t interface with it (which imo they must). if you have a different camera they fail (orthographic, most are primed for perspective). or they can’t animate, and if they do they highjack movement. cc seems to have solved all of these issues.

3 Likes

Is there a demo of fitToBox? The only relative demo on that page is fitToRect and from a brief look at the code fitToBox looks like it fits the camera to a given box3… Unless I’m mistaken?

PS: I wish documentation for libs like this as well as drei were conventionally arranged in alphabetical order, it would make things so much easier to find…

mugen turned down a script to do this in 3js docs saying it is easier to do it by hand - which, of course, he never did :rofl:

1 Like

Three js docs seem to be in alphabetical order and pretty comprehensive no?

ha ha, youre quite right, they SEEM to be. but arent.

I don’t know, at a random pick I chose to search for BufferGeometryUtils which yes seems to be… If there’s a script to do it I wonder why it’s not being used (emphasising my point) on the libs as in question…? :thinking:

the problem with “seem to be” is it’s worse than “obviously arent” - people assume they are and do not scroll down when the stuff is out of order, missing out on the knowledge that is hidden down there :pensive: but since 3js docs are fully manual thing, somebody has to sit down and fix them. and even then it costs nothing for somebody else to ruin it again.

1 Like

because people dgaf. personally, I would just switch to something like NaturalDocs, but that has even less chance of mugen’s approval.

I’m not sure I follow your train of thought, I guess it’s quite a task to update such a comprehensive documentation ( on many pages, by hand) in terms of three but doing so with a lib / extension with not nearly as many examples and extensive documentation should be a breeze (especially with a script to do so) right? Anyway not to let this go off topic :slight_smile:

Whats this, I’m not aware of it? I’m sure people gaf…