New: AR-3D model weergave gemaakt

layouts/shortcodes/3d.html

@@ -0,0 +1,94 @@
+<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
+
+<style>
+  .model-container {
+    width: 100%;
+    height: 500px;
+    background-color: #f8f9fa;
+    border-radius: 15px;
+    overflow: hidden;
+    position: relative;
+    border: 1px solid #dee2e6;
+  }
+
+  model-viewer {
+    width: 100%;
+    height: 100%;
+    background-color: #f8f9fa;
+    --poster-color: transparent;
+  }
+
+  /* De poster/lader wordt door model-viewer zelf verborgen na laden */
+  #lazy-load-poster {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: #f8f9fa;
+  }
+
+  #ar-button {
+    background-color: #ffffff;
+    border-radius: 30px; /* Iets ronder voor moderne look */
+    border: 1px solid #007bff;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%); /* Netjes in het midden onderaan */
+    padding: 12px 24px;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    color: #007bff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+  }
+
+  #ar-button:active {
+    background-color: #e7f1ff;
+    transform: translateX(-50%) scale(0.95);
+  }
+
+  /* Verbergt de knop op desktop (omdat AR daar niet kan) */
+  /* Maar we laten hem op mobiel altijd staan voor de test */
+  @media (pointer: fine) {
+    #ar-button {
+      display: none;
+    }
+  }
+</style>
+
+<div class="model-container">
+  <model-viewer 
+    id="woning-viewer"
+    src="/3d/{{ .Get "model" }}" 
+    ar 
+    ar-modes="scene-viewer webxr quick-look" 
+    ar-placement="floor"
+    camera-controls 
+    shadow-intensity="1" 
+    auto-rotate 
+    touch-action="pan-y"
+    reveal="auto"
+    scale="0.01 0.01 0.01" 
+    camera-orbit="45deg 75deg auto">
+    
+    <div slot="poster" id="lazy-load-poster">
+       <div class="text-center">
+          <div class="spinner-border text-primary" role="status"></div>
+          <p class="mt-2">Woning wordt op ware grootte geplaatst...</p>
+       </div>
+    </div>
+
+    <button slot="ar-button" id="ar-button">
+        👋 BEKIJK IN UW TUIN
+    </button>
+</model-viewer>
+</div>