Typescript: How can we pass extra parameters as props in the example from the Introduction?

[RednarRosique]

Hi,

Taking the Typescript example shown at https://docs.pmnd.rs/react-three-fiber/getting-started/introduction I'm now wondering what's the right way to do it if I want to pass an extra prop like a "box size". Is it something like this?

interface BoxProps {
  meshProps: JSX.IntrinsicElements['mesh'],
  boxSize: number,
}

function Box(props: BoxProps) {
...
<mesh
      {...props.meshProps} ... <boxGeometry args={[props.boxSize, 1, 1]} />
...
}

...
<Box position={[-1.2, 0, 0]} boxSize={3} />

If I do the above, the boxSize prop works for me, but I can't get the position to do its thing. I dug through the documentation but couldn't find anything that hinted at the right way to do this. Does anyone have any advice?

Btw, on the component declaration tsserver gives me an error like Property 'position' does not exist on type 'IntrinsicAttributes & BoxProps.

[Sean-Bradley]

I haven't found anything definitive yet either, but since you are using TypeScript, you can safely add custom anything to any Object3D userData without getting type errors.

https://threejs.org/docs/#api/en/core/Object3D.userData

<Box position={[-1.2, 0, 0]} userData-boxSize={3} />

Then in your Box component, provided you have a ref,

  useEffect(() => {
    console.log(ref.current.userData)
  })

outputs

{
    "boxSize": 3
}

Therefore you could say,

  useEffect(() => {
    console.log(ref.current.userData.boxSize)
  })

and that would return the number 3