Can we zoom in or zoom out infinitely in Three.js without any limit?

Questions
,
1

Hey guys,

I’m working on a small 3D room configurator, and here’s the problem I faced so far:

As you can see, if I make one of the walls too big, I won’t be able to zoom in enough to see the other two walls nearby clearly, so I can’t reach them anymore, and zooming in has a limit. Can’t we remove this limit, so that I’ll be able to zoom in more and more?

EDIT: I use R3F.

2

There’s no real limit as long as the numbers allow - but make sure your objects stay within bounds defined by Camera.near and Camera.far.

2 Likes
3

In the video you’ve shared it looks like the orbit controls target is set to the center of the scene the entire time, the camera position will progressively slow and stop as it gets closer to the target, what you’d ideally want to do is either have a variable controls target which could be pinned to the mouses position raycasted onto any hovered object, or “hijack” the orbit controls object (camera) position at a certain distance from the target to use the cameras zoom instead of the default positional dollying behaviour

3 Likes
4

Does Logarithmic Depth Buffer help?

1 Like
5
  • Maybe your element/view is nested in an effect component (i.e. <Bound> or <Center>). Or zoom.near state exponentially decreases.
  • Maybe your geometry/light ref needs an update (i.e. useHook, useState, useFrame) from the gui onChange.

~ fiverrr@OnlyFans.com

1 Like
6

You’re using OrbitControls (via r3f) which moves closer and closer to the center point that the camer rotates around.

You want to move closer to the wall. Doing that with OrbitControls is the most difficult thing to explain to someone who is new to this, but here goes:

  • make a camera that is child of the scene
  • make OrbitControls controls this camera
  • add an empty Object3D to the scene
  • add a second camera to the Object3D
  • use the second camera for render only, not the first camera
  • any time the OrbitControls are updated, copy the first camera’s world position/rotation to the second camera’s position/rotation. This will cause the second camera to move in the same way as the first camera that is being controlled
  • now, here’s the trick: you can move the Object3D (that is the parent of the second camera) to any position you want, for example closer to the far wall
  • the second camera will appear to always rotate around the parent Object3D no matter where the parent Object3D is located in the scene

This trick is needed in order to make it possible to move the central point about which the camera rotates. But with OrbitControls, the way the math is calculated, it is not possible to translate it away from the scene origin without complexities that will likely lead you to have a broken camera. So this trick is that, the “fake” camera is always being rotated around the origin, and the second camera (the one used for rendering) is always rotating relative to its parent Object3D when we copy fake camera position/rotation to the second camera.

Make sense?

3 Likes
7

here is an infinite scroll orbit controls demo for reference.
when you scroll, it also moves the camera position and target along the cameras view direction the same amount.

2 Likes
8

Thank you all! I solved my problem using CameraControls from React Three Drei with the prop infinityDolly set to true! No Orbit Controls at all!

1 Like