model-viewer/index.html at master · Betakontext/model-viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!--
Copyright (c) 2026 Christoph Medicus
Fork and explore: https://github.com/betakontext/model-viewer
Licensed under the MIT License
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>3D Viewer</title>

  <link rel="stylesheet" href="styles.css" />

  <!-- Import map for ESM modules used by app.js -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/",
      "@lumaai/luma-web": "https://unpkg.com/@lumaai/luma-web@0.2.0/dist/library/luma-web.module.js"
    }
  }
  </script>
</head>
<body>
  <!-- Top controls -->
  <button id="bg-toggle" aria-label="Toggle background black/white">Black Background</button>
  <button id="fullscreen-btn" aria-label="Toggle fullscreen">Fullscreen</button>
  <!-- Remove or keep this if you plan to wire a separate SuperSplat VR flow -->
  <!-- <button id="supersplat-vr-btn" class="hidden" aria-label="Enter VR for SuperSplat">Enter VR (SuperSplat)</button> -->

  <!-- Link bar with overlay typography -->
  <div class="link-container overlay-typography" role="navigation" aria-label="Model Links">
    <a href="#" data-src="https://lumalabs.ai/capture/afeec738-2a49-42bd-bd0b-fde2fd215d20">Dino head (GS)</a> |
    <a href="#" data-src="https://lumalabs.ai/capture/8bb65c41-db69-4096-ad66-413283039e3b">Tree trunk (GS)</a> |
    <a href="#" data-src="https://lumalabs.ai/capture/bbd433e8-9cad-4546-8be1-3f13d99f9584">Raised stand (GS)</a> |
    <a href="#" data-src="https://superspl.at/s?id=72100825">Euro coin (GS)</a> |
    <a href="#" data-src="models/Affe_lowpoly_tris.obj">Lowpoly monkey (OBJ)</a> |
    <!-- <a href="#" data-src="models/Schildkroete.fbx">Turtle sculpture (FBX)</a> | -->
    <a href="#" data-src="models/Bienenkasten.glb">Beehive (GLTF)</a>
  </div>

  <!-- Viewer slot: holds either the Three.js canvas or the SuperSplat iframe -->
  <div id="viewer-slot" class="viewer-slot">
    <!-- app.js attaches renderer.domElement here -->
    <iframe
      id="supersplat-inline"
      class="supersplat-inline hidden"
      title="SuperSplat Viewer"
      src=""
      allow="xr-spatial-tracking; fullscreen; autoplay"
      loading="eager"
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
  </div>

  <!-- Overlay loaded from a separate file (kept minimal) -->
  <iframe
    id="overlay-frame"
    src="overlay.html"
    title="Overlay"
    loading="eager"
    allow=""
    sandbox="allow-scripts">
  </iframe>

  <div id="loading" role="status" aria-live="polite">Loading...</div>

  <script type="module" src="app.js" fetchpriority="high"></script>
</body>
</html>