How to use directionLightHelper?

[slyofzero]

I am trying to use the directionalLightHelper in my NexTJS project but am unable to. So far I have tried two methods.

Method 1 -

const dirLight = useRef<DirectionalLight>(null);

return (
  <Canvas>
    <directionalLight color={"#005F00"} intensity={1} ref={dirLight} />
    <directionalLightHelper light={dirLight} />
  <Canvas>
)

In this case I am getting the error TypeError: light is undefined

---

Method 2 -

I created a Light component with the useHelper hook and passed that inside the canvas.

const Light = () => {
  const dirLight = useRef<DirectionalLight>(null);
  useHelper(dirLight, DirectionalLightHelper, "red");

  return (
    <>
      <directionalLight color={"#005F00"} intensity={1} ref={dirLight} />
    </>
  );
};

In this case I am getting a black colored line at the origin. I am confused if the light helper is supposed to look like this or not?

[slyofzero]

I checked the properties the useHelper hook takes in and found out that the color comes after the size arguement. So doing a few changes to the code made a square appear on the canvas, much similar to what the DirectionLightHelper function gives in vanilla three.js.

useHelper(dirLight, DirectionalLightHelper, 1, "red");

Upon changing the position of the directional light, the helper responds accordingly.

[mj2068]

i was trying exactly the same today using Method 1, it gave me a few errors. and it worked follow your Method 2.
but i was wondering, do you know why Method 1 doesn't work? it seems much cleaner.

[y1501519413]

you can write your Method 1 like this

const Light = () => {
  const directionalLightRef = useRef()
  const [isReady, setIsReady] = useState(false)
  useEffect(() => {
    if (directionalLightRef.current) {
      setIsReady(true)
    }
  })
  return (
    <>
      <directionalLight
        ref={directionalLightRef}
        position={[1, 1, 0]}
        color={0xffffff}
        intensity={10}
      />
      {isReady && (
        <directionalLightHelper args={[directionalLightRef.current, 2, 0xff0000]} />
      )}
    </>
  )
}
export default Light

[mj2068]

okay, i got you. isReady as mounted flag, only render helper when light is created. thanks for the hint.

[AndrosGuirado]

It might even be a little simpler:

const Light = () => {
  const directionalLightRef = useRef()
  
  return (
    <>
      <directionalLight
        ref={directionalLightRef}
        position={[1, 1, 0]}
        color={0xffffff}
        intensity={10}
      />
      {directionalLightRef.current && (
        <directionalLightHelper args={[directionalLightRef.current, 2, 0xff0000]} />
      )}
    </>
  )
}
export default Light