Type of <mesh> and <canvas> with fiber and typescript?

Questions
1

Hi,

I have problem typing that :

function EnsembleImage(): ? {
  return (
      <mesh>
        <cylinderGeometry args={[0.03, 0.03, length, 16]} />
        <meshStandardMaterial color="white" />
      </mesh>
  );
}

It doesn’t work if I indicate Three.mesh.
What type should I indicate ? and what is the type of ? Thank you

2

In this case, i think you don’t need to indicate the return type.

Use

function EnsembleImage() {

It should auto infer to JSX.Element

1 Like
3

just make sure you have @types/three installed, it must auto infer everything. your ide should have have types ready for auto complete and hover-over. function output must be inferred, input can be handled like so:

function Foo(props: JSX.IntrinsicElements['group'])
  const ref = useRef<THREE.Group>(null!)
  // ...
  return <group ref={ref} {...props} />

<Foo position={[1,2,3]} scale={2} rotation-x={Math.PI / 2}>
  <mesh />
  <group />
</Foo>
1 Like