Fix: implemented dynamic GLB file loading logic

addDimLines.js

@@ -0,0 +1,157 @@
+export function initDimensionLines(modelViewer) {
+  // 2. Original Logic (Now guaranteed to find elements)
+  const checkbox = modelViewer.parentElement.querySelector("#show-dimensions");
+  const dimensionLineContainer = modelViewer.parentElement.querySelector("#dimLines");
+
+  function setVisibility(element) {
+    if (checkbox.checked) {
+      element.classList.remove("hide");
+      dimensionLineContainer.classList.add("loaded"); // show the lines
+    } else {
+      element.classList.add("hide");
+      dimensionLineContainer.classList.remove("loaded"); // hide the lines
+    }
+  }
+
+  checkbox.addEventListener("change", () => {
+    setVisibility(dimensionLineContainer);
+    modelViewer.querySelectorAll("button").forEach((hotspot) => {
+      setVisibility(hotspot);
+    });
+    renderSVG();
+  });
+
+  // Give each line a start and end point,
+  // Use the midpoint to check for visibility
+
+  // update svg
+  function drawLine(svgLine, hotspot1Name, hotspot2Name, dimensionHotspotName) {
+    if (!svgLine) return;
+
+    // Use queryHotspot to get real-time 2D positions and visibility
+    const hotspot1 = modelViewer.queryHotspot(hotspot1Name);
+    const hotspot2 = modelViewer.queryHotspot(hotspot2Name);
+    const dimensionHotspot = dimensionHotspotName ? modelViewer.queryHotspot(dimensionHotspotName) : null;
+    const dimHotspotEl = dimensionHotspotName ? modelViewer.querySelector(`button[slot="${dimensionHotspotName}"]`) : null;
+
+    if (hotspot1 && hotspot2 && hotspot1.canvasPosition && hotspot2.canvasPosition) {
+      svgLine.setAttribute("x1", hotspot1.canvasPosition.x);
+      svgLine.setAttribute("y1", hotspot1.canvasPosition.y);
+      svgLine.setAttribute("x2", hotspot2.canvasPosition.x);
+      svgLine.setAttribute("y2", hotspot2.canvasPosition.y);
+
+      // Manage visibility based on camera facing and checkbox state
+      const isVisible = checkbox.checked && (!dimensionHotspot || dimensionHotspot.facingCamera);
+
+      if (isVisible) {
+        svgLine.style.display = "block";
+        svgLine.style.stroke = "#16a5e6";
+        svgLine.style.strokeWidth = "2";
+        if (dimHotspotEl) dimHotspotEl.classList.add("visible");
+      } else {
+        svgLine.style.display = "none";
+        if (dimHotspotEl) dimHotspotEl.classList.remove("visible");
+      }
+    } else {
+      svgLine.style.display = "none";
+      if (dimHotspotEl) dimHotspotEl.classList.remove("visible");
+    }
+  }
+
+  const dimLines = modelViewer.parentElement.querySelectorAll("#dimLines line");
+
+  const renderSVG = () => {
+    drawLine(dimLines[0], "hotspot-dot+X-Y+Z", "hotspot-dot+X-Y-Z", "hotspot-dim+X-Y");
+    drawLine(dimLines[1], "hotspot-dot+X-Y-Z", "hotspot-dot+X+Y-Z", "hotspot-dim+X-Z");
+    drawLine(dimLines[2], "hotspot-dot+X+Y-Z", "hotspot-dot-X+Y-Z", "hotspot-dim+Y-Z");
+    drawLine(dimLines[3], "hotspot-dot-X-Y+Z", "hotspot-dot+X-Y+Z", "hotspot-dim-Y+Z");
+    drawLine(dimLines[4], "hotspot-dot-X+Y-Z", "hotspot-dot-X-Y-Z", "hotspot-dim-X-Z");
+    drawLine(dimLines[5], "hotspot-dot-X-Y-Z", "hotspot-dot-X-Y+Z", "hotspot-dim-X-Y");
+  };
+
+  // Continuous rendering loop for smooth synchronization (including auto-rotate)
+  const tick = () => {
+    if (checkbox.checked) {
+      renderSVG();
+    }
+    requestAnimationFrame(tick);
+  };
+
+  // Set the positions of all the hotspots on page load
+  modelViewer.addEventListener("load", () => {
+    // 1. 使用 3.4.0 推荐的 API 获取尺寸和中心点
+    const center = modelViewer.getBoundingBoxCenter();
+    const size = modelViewer.getDimensions();
+    const x2 = size.x / 2;
+    const y2 = size.y / 2;
+    const z2 = size.z / 2;
+
+    // 2. 定义所有热点的新位置映射
+    const hotspots = [
+      { name: "hotspot-dot+X-Y+Z", pos: `${center.x + x2} ${center.y - y2} ${center.z + z2}` },
+      { name: "hotspot-dim+X-Y", pos: `${center.x + x2} ${center.y - y2} ${center.z}` },
+      { name: "hotspot-dot+X-Y-Z", pos: `${center.x + x2} ${center.y - y2} ${center.z - z2}` },
+      { name: "hotspot-dim+X-Z", pos: `${center.x + x2} ${center.y} ${center.z - z2}` },
+      { name: "hotspot-dot+X+Y-Z", pos: `${center.x + x2} ${center.y + y2} ${center.z - z2}` },
+      { name: "hotspot-dim+Y-Z", pos: `${center.x} ${center.y + y2} ${center.z - z2}` },
+      { name: "hotspot-dot-X+Y-Z", pos: `${center.x - x2} ${center.y + y2} ${center.z - z2}` },
+      { name: "hotspot-dim-X-Z", pos: `${center.x - x2} ${center.y} ${center.z - z2}` },
+      { name: "hotspot-dot-X-Y-Z", pos: `${center.x - x2} ${center.y - y2} ${center.z - z2}` },
+      { name: "hotspot-dim-X-Y", pos: `${center.x - x2} ${center.y - y2} ${center.z}` },
+      { name: "hotspot-dot-X-Y+Z", pos: `${center.x - x2} ${center.y - y2} ${center.z + z2}` },
+      { name: "hotspot-dim-Y+Z", pos: `${center.x} ${center.y - y2} ${center.z + z2}` }
+    ];
+
+    // 3. 循环更新每一个 Hotspot
+    hotspots.forEach(hs => {
+      const el = modelViewer.querySelector(`button[slot="${hs.name}"]`);
+      if (el) {
+        el.dataset.position = hs.pos;
+        modelViewer.updateHotspot({
+          name: hs.name,
+          position: hs.pos
+        });
+      }
+    });
+
+    // 4. 更新文本标签内容
+    drawLabels(size);
+
+    // 5. 显示线容器
+    dimensionLineContainer.classList.add("loaded");
+
+    // 6. 启动动画帧同步循环
+    requestAnimationFrame(tick);
+  });
+
+  // Add the text in appropriate units based off of the radio button
+  const toInchesConversion = 39.3701;
+
+  function drawLabels(size) {
+    if (document.getElementById("cms").checked == true) {
+      modelViewer.querySelector('button[slot="hotspot-dim+X-Y"]').textContent = `${(size.z * 100).toFixed(1)} cm`;
+      modelViewer.querySelector('button[slot="hotspot-dim+X-Z"]').textContent = `${(size.y * 100).toFixed(1)} cm`;
+      modelViewer.querySelector('button[slot="hotspot-dim+Y-Z"]').textContent = `${(size.x * 100).toFixed(1)} cm`;
+      modelViewer.querySelector('button[slot="hotspot-dim-X-Z"]').textContent = `${(size.y * 100).toFixed(1)} cm`;
+      modelViewer.querySelector('button[slot="hotspot-dim-X-Y"]').textContent = `${(size.z * 100).toFixed(1)} cm`;
+      modelViewer.querySelector('button[slot="hotspot-dim-Y+Z"]').textContent = `${(size.x * 100).toFixed(1)} cm`;
+    } else {
+      modelViewer.querySelector('button[slot="hotspot-dim+X-Y"]').textContent = `${(size.z * toInchesConversion).toFixed(1)} in`;
+      modelViewer.querySelector('button[slot="hotspot-dim+X-Z"]').textContent = `${(size.y * toInchesConversion).toFixed(1)} in`;
+      modelViewer.querySelector('button[slot="hotspot-dim+Y-Z"]').textContent = `${(size.x * toInchesConversion).toFixed(1)} in`;
+      modelViewer.querySelector('button[slot="hotspot-dim-X-Z"]').textContent = `${(size.y * toInchesConversion).toFixed(1)} in`;
+      modelViewer.querySelector('button[slot="hotspot-dim-X-Y"]').textContent = `${(size.z * toInchesConversion).toFixed(1)} in`;
+      modelViewer.querySelector('button[slot="hotspot-dim-Y+Z"]').textContent = `${(size.x * toInchesConversion).toFixed(1)} in`;
+    }
+  }
+
+  // Update labels if dimensions change manually or via radio toggle
+  const updateDimensionLabels = () => drawLabels(modelViewer.getDimensions());
+
+  modelViewer.addEventListener("change", updateDimensionLabels);
+
+  const cmsRadio = modelViewer.parentElement.querySelector("#cms");
+  const inchesRadio = modelViewer.parentElement.querySelector("#inches");
+  if (cmsRadio) cmsRadio.addEventListener("change", updateDimensionLabels);
+  if (inchesRadio) inchesRadio.addEventListener("change", updateDimensionLabels);
+}

default.html

@@ -11,6 +11,7 @@
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
+   <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
 </head>
 <body>
    <div class="container">
@@ -52,6 +53,7 @@ <h1>CARCAS</h1>
        </main>
    </div>
 
-   <script src="script.js"></script>
+   <script type="module" src="script.js"></script>
 </body>
 </html>
+

global.css

@@ -0,0 +1,219 @@
+:not(:defined) > * {
+  display: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+model-viewer {
+  width: 100%;
+  height: 90%;
+  background-color: #ffffff;
+}
+
+.progress-bar {
+  display: block;
+  width: 33%;
+  height: 10%;
+  max-height: 2%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  border-radius: 25px;
+  box-shadow:
+    0px 3px 10px 3px rgba(0, 0, 0, 0.5),
+    0px 0px 5px 1px rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.progress-bar.hide {
+  visibility: hidden;
+  transition: visibility 0.3s;
+}
+
+.update-bar {
+  background-color: rgba(255, 255, 255, 0.9);
+  width: 0%;
+  height: 100%;
+  border-radius: 25px;
+  float: left;
+  transition: width 0.3s;
+}
+
+#ar-button {
+  background-image: url(ar_icon.png);
+  background-repeat: no-repeat;
+  background-size: 20px 20px;
+  background-position: 12px 50%;
+  background-color: #fff;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  top: 16px;
+  padding: 0px 16px 0px 40px;
+  font-family: Roboto Regular, Helvetica Neue, sans-serif;
+  font-size: 14px;
+  color:#4285f4;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 18px;
+  border: 1px solid #DADCE0;
+}
+
+#ar-button:active {
+  background-color: #e8eaed;
+}
+
+#ar-button:focus {
+  outline: none;
+}
+
+#ar-button:focus-visible {
+  outline: 1px solid #4285f4;
+}
+
+@keyframes circle {
+  from {
+    transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg);
+  }
+  to {
+    transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg);
+  }
+}
+
+@keyframes elongate {
+  from {
+    transform: translateX(100px);
+  }
+  to {
+    transform: translateX(-100px);
+  }
+}
+
+model-viewer > #ar-prompt {
+  position: absolute;
+  left: 50%;
+  bottom: 60px;
+  animation: elongate 2s infinite ease-in-out alternate;
+  display: none;
+}
+
+model-viewer[ar-status="session-started"] > #ar-prompt {
+  display: block;
+}
+
+model-viewer > #ar-prompt > img {
+  animation: circle 4s linear infinite;
+}
+
+#controls {
+  /* position: absolute;
+    top: 0;
+    left: 0; */
+  max-width: unset;
+  transform: unset;
+  pointer-events: auto;
+  display: inline-block;
+}
+
+#controlContainer {
+  width: 100%;
+  position: absolute;
+  text-align: center;
+  pointer-events: none;
+  z-index: 20;
+}
+
+@media (min-width: 768px) {
+  #controlContainer {
+    top: 8px;
+    text-align: left;
+    left: 8px;
+  }
+}
+
+@media (max-width: 767px) {
+  #controlContainer {
+    bottom: 8px;
+    left: 0;
+  }
+}
+
+.dot {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: none;
+  box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  background: #fff;
+  pointer-events: none;
+  --min-hotspot-opacity: 0;
+}
+
+.dim {
+  background: #fff;
+  border-radius: 4px;
+  border: none;
+  box-sizing: border-box;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  color: rgba(0, 0, 0, 0.8);
+  display: inline-block;
+  font-family:
+    Futura,
+    Helvetica Neue,
+    sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  max-width: 128px;
+  overflow-wrap: break-word;
+  padding: 0.5em 1em;
+  /* position: absolute; */
+  width: max-content;
+  height: max-content;
+  transform: translate3d(-50%, -50%, 0);
+  pointer-events: none;
+  --min-hotspot-opacity: 0;
+}
+
+.dimensionLineContainer {
+  pointer-events: none;
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  /* display: block; */
+}
+
+.dimensionLineContainer.loaded {
+  display: block;
+}
+
+.dimensionLine {
+  stroke: #16a5e6;
+  stroke-width: 2;
+  stroke-dasharray: 2;
+}
+
+.show {
+  --min-hotspot-opacity: 1;
+}
+
+.hide {
+  display: none;
+}
+/* This keeps child nodes hidden while the element loads */
+/* :not(:defined) > * {
+  display: none;
+} */