MapControls with OrthograhicCamera respond to maxDistance not maxZoom, minZoom

[talkingtab]

i have two parallel versions of the same app: one uses threejs, the other react-three-fiber I have an OrthographicCamera in each (same parameters) and a MapControl.

In threejs setting minZoom and maxZoom controls how far in and out I can zoom. This fits the source code for OrbitalControls {Orthographic Camera only}.

In the react three fiber version, maxDistance works but not minZoom and maxZoom (This does not fit the threejs source for OrbitalControls that

threejs is 0.163.0 (BOTH), fiber is 8.16.2

Thanks very much! I'm trying to build a new kind of website navigation system from treemap that allow you to zoom in and see more the same way google maps lets you zoom into one house. I'm using zoomToCursor and want to find a way to do unZoomToOrigin. Three, drei and fiber are incredibly good.

[talkingtab]

Looking into this, it appears that the problem may be that with @react three stdlib which is on version 160 of threejs. I am wondering how hard it is to update three/stdlib and then will drei need updating?

[CodyJasonBennett]

We'll need to see what exactly enabled that behavior upstream in three. Until then, you can use theirs directly:

import { OrbitControls as OrbitControlsImpl } from 'three/addons'
import { extend, useThree } from '@react-three/fiber'

extend({ OrbitControls: OrbitControlsImpl })

function OrbitControls(props) {
  const gl = useThree((state) => state.gl)
  const camera = useThree((state) => state.camera)
  return <orbitControls {...props} args={[camera, gl.domElement]} />
}

[talkingtab]

Thank you very much for the help. This is what I ended up doing. I am attempting to use threejs/fiber/drei to replace the "menu" paradigm with a zoomable treemap. I am making it up as I go, but the idea is that like google maps, you can get to anywhere from one screen/gizmo.

Using drei adds a layer of abstraction on top of fiber on top of three so being able to "punch" down to three is a very valuable aid. I ended up importing a copy of threejs OrbitControls.js directly into my code since it is in "examples" and requires only the one file. I highly recommend this technique for anyone who stumbles on this kind of problem.

And thank you to everyone who works on threejs/fiber/three!