Revamped project page; Switch to React; Updated pkgs

1 files changed, 25 insertions, 0 deletions

diff --git a/src/components/3DModels.jsx b/src/components/3DModels.jsx
new file mode 100644
index 0000000..4d8507e
--- /dev/null
+++ b/src/components/3DModels.jsx
@@ -0,0 +1,25 @@
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+
+const Model = ({ model, scale }) => {
+    const gltf = useLoader(GLTFLoader, model);
+    return (
+        <>
+            <primitive object={gltf.scene} scale={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>
+    )
+}