Add Custom components in @react-three/fiber scene

Question

So my issue is that I want to add my custom components into my scene. But these custom components will be defined in a different file. So when I define my custom component all three-fiber components come across as

Cannot find name 'planeGeometry'. Did you mean 'PlaneGeometry'?

My app is written in Typescript. I tried it in sandbox for Javascript it was working fine. Maybe I didn't set up @react-three/fiber properly since even adding props to the component give error.

Say I want to add a plane mesh into my scene, Plane Mesh defined in Ground.ts and My Scene defined in Scene.ts

Scene.ts:

import {Ground} from './Ground'
const Scene =()=>{
return (
      <Canvas>
        <Ground />
      </Canvas>
  );
};

Ground.ts

import {useTexture} from '@react-three/drei';

export const Ground = () => {
  const groundUrl = "<url_here>";
  const texture = useTexture(groundUrl);
  return (
    <mesh>
      <planeGeometry args={[120, 120]} />
      <meshStandardMaterial map={texture} />
    </mesh>
  );
};

Here the components mesh, planeGeometry, meshStandardMaterial all give give errors as not found component. Is there any other step that I'm missing. I'm not very familiar with Typescript so I probably missed a few things.

score 0 · Accepted Answer · answered Feb 21 '23 at 11:07

Right so I realized the difference between .ts and .tsx is that .tsx includes both JSX components and functions and other logic, while .ts files can only have functions and logic containing components. Which is why .tsx files can include these components. Although these components still do not accept props for some reason, but I can just pass the props as a key value pair.

Add Custom components in @react-three/fiber scene

1 Answers1