Using cameraHelper

[YassienW]

I'm not sure how to attach a cameraHelper to a camera

<cameraHelper>
     <orthographicCamera attrs={[75, window.innerWidth / window.innerHeight, 0.1, 1000]} position={[0, 0, 200]}/>
</cameraHelper>

This throws an error
TypeError: Cannot read property 'updateProjectionMatrix' of undefined

Upon inspecting the error, it seems like the 'camera' variable passed to the camera helper is undefined

Any help would be appreciated, thanks

[gsimone]

Hey, we actually have a small helper hook to work with helpers, take a look here:

https://drei.react-spring.io/?path=/story/misc-usehelper--camera-story

1. create a ref const camera = useRef()
2. attach it to your camera <PerspectiveCamera ref={camera} />
3. use the hook useHelper(camera, CameraHelper, 1, 'hotpink')

[nakazoomi]

We can use React-Three-Drei to get a CameraHelper.

Check this Link here: https://drei.pmnd.rs/?path=/story/gizmos-usehelper--camera-story

[YassienW]

@gsimone is there a way to use a cameraHelper without adding this dependency?

[dgrcode]

@gsimone What if I have two Views, A and B, and I want to see the cameraHelper from A's camera inside the B view?

I'm trying to debug A, but I can't manage to render A's camera helper into B. If I use the <cameraHelper /> component from three-fiber I always get the error described above (TypeError: Cannot read property 'updateProjectionMatrix' of undefined). Even if I do this:

const DebugScene = ({ viewOriginal, viewDebug, children }: DebugSceneProps) => {
  const originalCamera = useRef(emptyCamera);

  const handleOriginalCamera = camera => {
    // I'm using ref callback because I'm doing more stuff to the camera
    // but I'm setting the ref object in the last line of this function
    if (!camera) {
      return;
    }
    console.log("original camera ready");
    originalCamera.current = camera;
  };

  return (
    <>
      <View track={viewOriginal}>
        <PerspectiveCamera
          makeDefault
          name="original"
          ref={handleOriginalCamera}
        />
        <OrbitControls makeDefault />
        {children}
      </View>
      <View track={viewDebug}>
        <PerspectiveCamera
          makeDefault
          name="debug"
        />
        {originalCamera.current && <cameraHelper camera={originalCamera.current} />}
        <OrbitControls makeDefault />
        {children}
      </View>
    </>
  );
};

[mcu13321]

@dgrcode I use attach to achieve it in View

        <PerspectiveCamera
          attach={(parent, self) => {
            const cameraHelper = new CameraHelper(self)
            parent.add(cameraHelper)
            return () => {
              cameraHelper.dispose()
              self.parent.remove(cameraHelper)
            }
          }}
          makeDefault
          ref={cameraRef}
          position={[0, 10, 0]}></PerspectiveCamera>

[mcu13321]

@dgrcode I also want to do the same thing you did, but I find View render the children into its own virtualScene which is used by createPortal. So it's no idea to share the same cameraHelper in different scene(see below code from https://github.com/pmndrs/drei/blob/7d3c5465e1341cf9c12ab0d5f94ae6dbd44970dd/src/web/View.tsx#L137C1-L138C70). Read your comments for a while, have you implemented DebugScene yet

// When children are present render the portalled scene, otherwise the default scene
state.gl.render(children ? state.scene : scene, state.camera)

[rgt90]

I am struggeling to use CameraHelper with PerspectiveCamera. I think it's an import issue at this point but I'm really hoping to maybe get some more input on here. Here is my class, as condensed as possible, only showing relevant lines of code:

import { CameraHelper } from 'three';
import { PerspectiveCamera } from '@react-three/drei';
import { useHelper } from '@react-three/drei/native';

export default function Editor() {
    const cameraRef = useRef<THREE.PerspectiveCamera>();
    useHelper(cameraRef, CameraHelper);
}

This does in fact build without errors, BUT when I run the app, it breaks with the following error message in Chrome's dev tools console:
Uncaught Error: R3F: Hooks can only be used within the Canvas component!

Note:
ImportinguseHelper from drei/native, instead of drei, resolves an error that occurs while building the app. Maybe the issues already start here?

Thank you SO much to anyone reading and maybe even replying!

[rgt90]

Fixed it lmao. For anyone struggeling with this issue:
Moving the useHelper() to the component that does NOT contain (Editor in my case) was the solution.
The element of my Editor component now looks a bit like this:

<Canvas>
    <MyCustomCameraWithHelper>

And, essentially useHelper() is called within the MyCustomCameraWithHelper component, which does NOT include a Element.

I find the error message a bit confusing tbh. To me, it sounds like the Component containing the element must also contain this specific hook. But well, turns out, the opposite is the case.