drei
drei copied to clipboard
GizmoHelper along with CameraControls not working
"three": "^0.163.0", "@react-three/fiber": "^8.16.2", "@react-three/drei": "^9.105.4",
Problem description:
Trying use both components (GizmoHelper and CameraControls) along gives an error while clicking on gizmo's cube (Gizmo with other components like OrbitControls, Perspective Camera works fine):
ERROR
Cannot use 'in' operator to search for 'minPolarAngle' in null
TypeError: Cannot use 'in' operator to search for 'minPolarAngle' in null
at isOrbitControls (http://localhost:3000/static/js/bundle.js:44459:26)
at Object.current (http://localhost:3000/static/js/bundle.js:44508:15)
at render$1 (http://localhost:3000/static/js/bundle.js:46735:22)
at loop (http://localhost:3000/static/js/bundle.js:46764:19)
GizmoHelper.js:18 Uncaught TypeError: Cannot use 'in' operator to search for 'minPolarAngle' in null
at isOrbitControls (GizmoHelper.js:18:1)
at Object.current (GizmoHelper.js:67:1)
at render$1 (index-c636ef6d.esm.js:1542:1)
at loop (index-c636ef6d.esm.js:1571:1)
When trying to set makedefault then getting different error while cliking on gizmo cube:
Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at Vector3.add (three.module.js:3930:1)
at Object.current (GizmoHelper.js:75:1)
at render$1 (index-c636ef6d.esm.js:1542:1)
at loop (index-c636ef6d.esm.js:1571:1)
code:
<Canvas>
<PerspectiveCamera
ref={refCamera}
makeDefault
near={200}
far={150000}
position={[60, 90, 1000]}
fov={fov_camera}
/>
<CameraControls
setTarget={[60, 90, 0]}
minPolarAngle={1}
/>
<GizmoHelper margin={[60, 60]} >
<GizmoViewcube />
</GizmoHelper>
</Canvas>
https://codesandbox.io/p/sandbox/cameracontrols-basic-sew669?file=%2Fsrc%2FApp.js%3A119%2C5-119%2C12
I get the same second error. My CameraControls
tag has the makeDefault={true}
attribute set.
When I debug it, I can see that in gizmo-helper.tsx
in the function tweenCamera
, focusPoint.current
gets set to undefined:
https://github.com/pmndrs/drei/blob/153607d4fa337a3c319c7eb883eebdbbaaf6c8e1/src/core/GizmoHelper.tsx#L79
It happens because defaultControls
is defined, but defaultControls.target
is not. I think this object comes from the camera-controls
npm package: https://github.com/yomotsu/camera-controls/blob/cf392955edfec75e45c6a2dc36f53891319f3918/src/CameraControls.ts#L380
In the GizmoHelper, that object is just cast to an interface. Dangerous! https://github.com/pmndrs/drei/blob/153607d4fa337a3c319c7eb883eebdbbaaf6c8e1/src/core/GizmoHelper.tsx#L62 https://github.com/pmndrs/drei/blob/153607d4fa337a3c319c7eb883eebdbbaaf6c8e1/src/core/GizmoHelper.tsx#L25
I haven't managed to fix the bug. Perhaps it is a clue for someone.