i am using react-three fiber and after all of this code it is not rendering on the screen i dont what is the issue with this at all
import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";
const Computers = () => {
const computer = useGLTF('./desktop_pc/scene.gltf');
console.log(computer);
return (
<mesh>
<hemisphereLight groundColor="black" intensity={0.15} />
<pointLight intensity={1} />
<primitive object={computer.scene} />
</mesh>
);
};
const ComputersCanvas = () => {
return (
<Canvas
frameloop="demand"
shadows
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Computers />
</Suspense>
<Preload all />
</Canvas>
);
};
export default Computers;
i tried import the hemiSphereLight from three.js but it is also giving errors