React three Fiber Cube doesn't show up

React three Fiber Cube doesn't show up

Problem Description:

I’m trying to render a rotating cube on my DOM, but for some reason, the following code does not show anything.

I don’t get any errors either.

function Cube(){
  const meshRef = useRef<Mesh>(null); 

   useFrame((state, delta) => (meshRef.current.rotation.x += delta))


  return(
    <mesh ref={meshRef}>
     <boxGeometry/>
      <meshStandardMaterial/>
    </mesh>
  )
}

function App() {


  return (
    <div className="App">
      <Canvas>
        <Cube />
      </Canvas>
    </div>
  );
}

Solution – 1

change ur file to .tsx it should fix it for