drei icon indicating copy to clipboard operation
drei copied to clipboard

GizmoHelper along with CameraControls not working

Open Russo-creation opened this issue 4 months ago • 1 comments

"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

Russo-creation avatar Apr 23 '24 22:04 Russo-creation

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.

geon avatar Apr 24 '24 13:04 geon