3d model

src/components/ModelViewer.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@google/model-viewer';
+
+const ModelViewer = () => {
+  return (
+    <div className="w-full h-[500px]">
+      <model-viewer
+        src="https://bscdn.sgp1.digitaloceanspaces.com/tb-revised-books/glb/alligator.glb"
+        ar
+        ar-modes="webxr scene-viewer quick-look"
+        camera-controls
+        tone-mapping="neutral"
+        poster="poster.webp"
+        shadow-intensity="1"
+        style={{ width: '100%', height: '100%' }}
+      >
+        <div className="progress-bar hide" slot="progress-bar">
+          <div className="update-bar"></div>
+        </div>
+        <button slot="ar-button" id="ar-button">
+          View in your space
+        </button>
+        <div id="ar-prompt">
+          <img src="https://modelviewer.dev/shared-assets/icons/hand.png" />
+        </div>
+      </model-viewer>
+    </div>
+  );
+};
+
+export default ModelViewer;