3D computer Added

src/components/canvas/Computers.jsx

@@ -1,9 +1,46 @@
-import React from 'react'
+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'
+import { Mesh } from 'three'
 
 const Computers = () => {
+  const computer =useGLTF('./desktop_pc/scene.gltf')
   return (
-    <div>Computers</div>
+      <mesh>
+        <hemisphereLight intensity={0.15}
+        groundColor="black"/>
+        <pointLight intensity={100}/>
+        <primitive 
+        object={computer.scene}
+        scale={0.75}
+        position={[0,-4.25,-1.25]}
+        rotation ={[-0.01,-0.2,-0.1]}
+        />
+      </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>
 
-export default Computers
+      <Preload all />
+    </Canvas>
+  )
+}
+
+
+export default ComputersCanvas