How do you declare the types for the SpotLight component?

[nicolasguasca1]

This example is perfectly working but the types won't work well yet to compile it.

I have the following:

const vec = new Vector3()
  function SpotlightElement(props: JSX.IntrinsicElements['group']) {
  const group = useRef<THREE.Group>(null!)
  const [light, set] = useState<typeof SpotLight>(null!)
  const viewport = useThree((state) => state.viewport)
  useFrame((state) => {
    group.current.position.lerp(vec.set(state.mouse.x, state.mouse.y, 0), 0.1)
    light.target.position.lerp(vec.set((state.mouse.x * viewport.width) / 2, (state.mouse.y * viewport.height) / 2, 0), 0.1)
  })
  return (
    <group ref={group}>
      <SpotLight ref={set} castShadow={true} penumbra={0.3} distance={200} angle={Math.PI/20} attenuation={1} anglePower={1} intensity={1.5} decay={0} {...props} />
      {light && <primitive object={light.target} />}
    </group>
  )
  }
  
  export default function MovingSpot() {
  const [depthBuffer, setDepth] = useState()
  return (
    <>
      <DepthBuffer ref={setDepth} size={512} />
      <SpotlightElement depthBuffer={depthBuffer} color="#0c8cbf" position={[-10, 30, 50]} />
      <SpotlightElement depthBuffer={depthBuffer} color="#b00c3f" position={[30, 30, 50]} />
    </>
  )
  }

Here is my doubt...how do I make typescript understand that the ref for the SpotLight component is retrieved from the set function? As of now it assumes is brings the component itself instead of the function that configures it: Type 'Dispatch<SetStateAction>' is not assignable to type 'Ref | undefined'.

Also, if the props attribute from the SpotLightElement function is being declared as JSX.IntrinsicElements from 'group' which will be the correct type to use instead, because now the depthBuffer property apparently doesn't exist in the JSX.IntrinsicElements.

Any help will be much appreciated. Thank you!!!

[joshuaellis]

Why are you doing it this way to render a spot light? Doesn't <spotLight /> work for you?

[nicolasguasca1]

For some reason, the function setDepth is outside the component to be following the mouse as in:

https://codesandbox.io/s/volumetric-spotlight-tx1pq?file=/src/App.js

Does the <spotLight /> component allow the same effect and result?

[drcmda]

@joshuaellis this is dreis volumetric spotlight. threejs spotlight is just a light, its not volumetric.

@nicolasguasca1 the ref you're getting back is a THREE.SpotLight: https://github.com/pmndrs/drei/blob/master/src/core/SpotLight.tsx#L48 so i think that should fix it

[nicolasguasca1]

Thank you so much @drcmda! I tried it and it solved the types. I had to use the component instead of though. Do you know why is this?