CSS tweaks; ThreeJS stuff; Moved feat. projects

1 files changed, 8 insertions, 11 deletions

diff --git a/src/components/3DModels.jsx b/src/components/3DModels.jsx
index 4d8507e..113cc11 100644
--- a/src/components/3DModels.jsx
+++ b/src/components/3DModels.jsx
@@ -1,5 +1,5 @@
 import { Canvas, useLoader } from "@react-three/fiber";
-import { OrbitControls } from "@react-three/drei";
+import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 
 const Model = ({ model, scale }) => {
@@ -12,14 +12,11 @@ const Model = ({ model, scale }) => {
 };
 
 export default function ThreeJSModels({ modelName, scale = 2 }) {
-    return (
-        <div>
-            <Canvas style={{ width: '70%', height: '70%', borderRadius: '10px', paddingBottom: '.5em' }}>
-                <Model model={modelName} scale={scale} />
-                <ambientLight intensity={1.5} />
-                <directionalLight color="white" position={[0, 2, 0]} />
-                <OrbitControls />
-            </Canvas>
-        </div>
-    )
+    return <Canvas style={{ width: '70%', height: '70%', borderRadius: '10px', paddingBottom: '.5em' }} fallback={<div>WebGL not supported...</div>}>
+        <Model model={modelName} scale={scale} />
+        <ambientLight intensity={1.5} />
+        <directionalLight color="white" position={[0, 2, 0]} />
+        <PerspectiveCamera makeDefault position={[0, 2, 5]} rotation={[0, Math.PI / 4, 0]} />
+        <OrbitControls />
+    </Canvas>
 }