Merge pull request #82 from Carifio24/m83-examples

Add M83 examples
glue-viz · Nov 12, 2024 · 3e0fced · 3e0fced
2 parents 81fa8b3 + 450429d
commit 3e0fced
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 0 deletions.
diff --git a/docs/examples/m83_isosurface.glb b/docs/examples/m83_isosurface.glb
diff --git a/docs/examples/m83_isosurface.html b/docs/examples/m83_isosurface.html
@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
+      <style>:root {
+  --glue-red: #eb1c24;
+}
+
+body {
+  margin: 0;
+  background-color: white;
+}
+
+model-viewer {
+  width: 100%;
+  height: 100%;
+}
+
+/* This keeps child nodes hidden while the element loads */
+:not(:defined) > * {
+  display: none;
+}
+.ar-button {
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-position: 12px 50%;
+  background-color: #f5c6c888;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 16px;
+  padding: 0px 16px 0px 40px;
+  font-family: Roboto Regular, Helvetica Neue, sans-serif;
+  font-size: 60pt;
+  font-weight: bold;
+  color: var(--glue-red);
+  height: 200px;
+  width: max(300px, 80%);
+  border-radius: 18px;
+  border: 5px solid var(--glue-red);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+.ar-button:active {
+  background-color: #E8EAED;
+}
+.ar-button:focus {
+  outline: none;
+}
+.ar-button:focus-visible {
+  outline: 1px solid #1f5ef1; 
+}
+.info {
+  display: block;
+  position: absolute;
+  font-family: Futura, Helvetica Neue, sans-serif;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: 700;
+  font-size: 18px;
+  max-width: 128px;
+  padding: 0.5em 1em;
+  background: #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  left: calc(100% + 1em);
+  top: 50%;
+}
+
+</style>
+  </head>
+  <body>
+    <model-viewer
+      src="m83_isosurface.glb"
+      ios-src="m83_isosurface.usdz"
+      camera-orbit="0.9677rad 1.2427rad auto"
+      shadow-intensity="1"
+      ar
+      ar-modes="webxr quick-look"
+      camera-controls
+      alt="None"
+    >
+      <button slot="ar-button" class="ar-button">
+        View in AR
+      </button>
+    </model-viewer>
+  </body>
+</html>
+
diff --git a/docs/examples/m83_isosurface.usdz b/docs/examples/m83_isosurface.usdz
diff --git a/docs/examples/m83_voxel.glb b/docs/examples/m83_voxel.glb
diff --git a/docs/examples/m83_voxel.html b/docs/examples/m83_voxel.html
@@ -73,6 +73,7 @@
   <body>
     <model-viewer
       src="m83_voxel.glb"
+      ios-src="m83_voxel.usdz"
       camera-orbit="0.9677rad 1.2427rad auto"
       shadow-intensity="1"
       ar

diff --git a/docs/examples/m83_voxel.usdz b/docs/examples/m83_voxel.usdz