3d model

package-lock.json

@@ -10,6 +10,9 @@
       "dependencies": {
         "@astrojs/react": "^4.2.1",
         "@astrojs/tailwind": "^6.0.0",
+        "@babylonjs/core": "^8.0.2",
+        "@babylonjs/loaders": "^8.0.2",
+        "@google/model-viewer": "^4.0.0",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-toast": "^1.2.6",
@@ -441,6 +444,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babylonjs/core": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-8.0.2.tgz",
+      "integrity": "sha512-Bq6Ue2mu6N351AhPqoPNT0jLMm3n9igAqLs9CLb4RiWNR+VBylIf+L+lw/HJ6L2iOOzT1YfY7jD+vg6mW5wY2A==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@babylonjs/loaders": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-8.0.2.tgz",
+      "integrity": "sha512-o9e5GUiysqpqsTfYf2EQhG4OZM+Tx4Cp1uy/6XKuk+xBqKjCp4cId0QDFkB3CISatB7BbC/TrSpgR5TuJ5/+Pw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@babylonjs/core": "^8.0.0",
+        "babylonjs-gltf2interface": "^8.0.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -889,6 +908,22 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@google/model-viewer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@google/model-viewer/-/model-viewer-4.0.0.tgz",
+      "integrity": "sha512-hf4mixP178gGtvWQq97a0uULr7k98BwJGRU3lvt12XnurOdLmZA/RPdW4tPsINNNQxZvmvQsjud4lZWre6WGNw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@monogrid/gainmap-js": "^3.0.1",
+        "lit": "^2.7.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "three": "^0.169.0"
+      }
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -1355,6 +1390,33 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.3.0.tgz",
+      "integrity": "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.1.0.tgz",
+      "integrity": "sha512-Obb0/gEd/HReTlg8ttaYk+0m62gQJmCblMOjHSMHRrBP2zdfKMHLCRbh/6ex9fSUJMKdjjIEiohwkbGD3wj2Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2466,6 +2528,12 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2784,6 +2852,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/babylonjs-gltf2interface": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/babylonjs-gltf2interface/-/babylonjs-gltf2interface-8.0.2.tgz",
+      "integrity": "sha512-H913H03OSNfRlq0HLwrUjaJMmqYdINZPsX7dfa0Wg4mXmUgEIWSPxPi1Bl4gVwVGemZ8/PsFYbeOtyofwZBFJA==",
+      "license": "Apache-2.0",
+      "peer": true
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -4113,6 +4188,12 @@
       ],
       "license": "BSD-3-Clause"
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-meta-resolve": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
@@ -4268,6 +4349,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@@ -4400,6 +4487,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -4418,6 +4514,37 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "license": "MIT"
     },
+    "node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/log-symbols": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-5.1.0.tgz",
@@ -5907,6 +6034,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -7020,6 +7157,13 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.169.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.169.0.tgz",
+      "integrity": "sha512-Ed906MA3dR4TS5riErd4QBsRGPcx+HBDX2O5yYE5GqJeFQTPU+M56Va/f/Oph9X7uZo3W3o4l2ZhBZ6f6qUv0w==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tinyexec": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",

package.json

@@ -12,6 +12,9 @@
   "dependencies": {
     "@astrojs/react": "^4.2.1",
     "@astrojs/tailwind": "^6.0.0",
+    "@babylonjs/core": "^8.0.2",
+    "@babylonjs/loaders": "^8.0.2",
+    "@google/model-viewer": "^4.0.0",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-toast": "^1.2.6",

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;

src/pages/3d-model.astro

@@ -0,0 +1,11 @@
+---
+import Layout from "../layouts/Layout.astro";
+import ModelViewer from "../components/ModelViewer";  // Ensure the name matches
+---
+
+<Layout title="3D Model Viewer">
+  <div class="flex flex-col items-center justify-center h-screen">
+    <h1 class="text-4xl font-bold mb-4">3D Model Viewer</h1>
+    <ModelViewer client:only="react" />
+  </div>
+</Layout>