Increase rendering distance with Drei's OrbitControls component


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.

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} />

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

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

    near: 0.1,
    far: 10000.0

:point_right: react-three-fiber docs


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.