Increase rendering distance with Drei's OrbitControls component

Questions
,
1

Hello,

I am using React Three Fiber with Drei. The issue is that files being viewed are cut off due to size. For example, here is a 3D model of a ladder, such that the space between each step is 300 Three.js units. As a result, the ladder part (get it? :laughing:) of the shape is cut off.

Scaling down the user’s model is not an option, as preserving the shape scale is important to the user in our use case.

image
image1807×1015 26.2 KB

For the Fiber Viewer, my code is the following:

<Canvas style={{ "width": "100%", "height": "600px", "boxSizing": "border-box" }}>
    <color attach="background" args={[0, 0, 0]} />
    <OrbitControls />
    <primitive object={highestLevelObject} />
</Canvas>

How can I configure the near and far of the Orbit controls to increase the far?

2

Near and far planes are properties of PerspectiveCamera, controls just control the camera but don’t modify its properties, this should help:

<Canvas
  camera={{
    near: 0.1,
    far: 10000.0
  }}
>
  {...}
</Canvas>

:point_right: react-three-fiber docs

2 Likes
3

orbitcontrols are also just threejs orbitcontrols, so everything in the three docs applies. you can cast a larger search radius that way, im sure people must have struggled with this in vanilla apps as well somewhere.

i would also suggest inspecting model bounds, maybe it’s way, way too large.