I'm trying to render an .obj file into my react project using the OBJLoader and useLoader() hook from React Three Fiber, but I'm unable to do so. My file path is correct and I'm wrapping the Model in Suspense tags, so why is this occurring?
import React, { Suspense } from "react";
import * as THREE from "three";
import { Canvas, useLoader } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
function Model() {
const model = useLoader(
OBJLoader,
"../assets/Model.obj"
);
return <primitive object={model} scale={0.4} />;
}
function App() {
return (
<div className="App">
<Canvas>
<OrbitControls
enablePan={true}
enableZoom={true}
enableRotate={true}
addEventListener={undefined}
hasEventListener={undefined}
removeEventListener={undefined}
dispatchEvent={undefined}
/>
<Lights />
<Suspense fallback={null}>
<Model />
</Suspense>
</Canvas>
</div>
);
}
export default App;