BeeAR/packages/web/studio3d.html at master · mergeos-bounties/BeeAR · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>BeeAR — 3D Person Try-On</title>
  <meta name="description" content="BeeAR 3D Studio — full person + glasses GLB try-on in the browser." />
  <link rel="stylesheet" href="/assets/studio3d.css" />
  <meta property="og:title" content="BeeAR — 3D Person Studio" />
  <meta property="og:description" content="Full-body 3D characters + glasses GLB try-on in the browser." />
</head>
<body>
  <div id="app">
    <header class="top">
      <div class="brand">
        <span class="logo">🐝</span>
        <div>
          <strong>BeeAR 3D Studio</strong>
          <div class="tag">Real 3D characters · glasses GLB try-on</div>
        </div>
      </div>
      <div class="actions">
        <a class="btn" href="https://github.com/mergeos-bounties/BeeAR" target="_blank" rel="noopener">GitHub</a>
        <a class="btn" href="/">← 2D / Camera</a>
        <button id="btn-auto" class="btn primary" type="button">Auto-rotate</button>
        <button id="btn-snap" class="btn" type="button">Snapshot</button>
      </div>
    </header>
    <main class="layout">
      <section class="stage">
        <canvas id="view" width="960" height="640"></canvas>
        <div id="stage-load" class="stage-load" aria-live="polite">
          <div class="stage-load-spin"></div>
          <span id="stage-load-text">Loading 3D studio…</span>
        </div>
        <div id="hint" class="hint">Drag to orbit · scroll to zoom · pick person + frames</div>
        <div id="badge" class="badge">3D try-on · GLB glasses</div>
      </section>
      <aside class="rail">
        <div class="rail-head">
          <h2>Person</h2>
        </div>
        <div class="pd-panel">
          <label>Character
            <select id="person-select">
              <option value="">Loading…</option>
            </select>
          </label>
        </div>
        <div class="rail-head">
          <h2>Frames (3D)</h2>
          <select id="filter">
            <option value="glasses">Glasses</option>
            <option value="">All</option>
          </select>
        </div>
        <div class="pd-panel">
          <label>Fit scale <span id="scale-val">1.00</span>
            <input id="scale" type="range" min="0.5" max="1.6" step="0.01" value="1" />
          </label>
          <label>Y offset <span id="y-val">0.00</span>
            <input id="yoff" type="range" min="-0.25" max="0.25" step="0.005" value="0" />
          </label>
          <label>Z (depth) <span id="z-val">0.00</span>
            <input id="zoff" type="range" min="-0.2" max="0.25" step="0.005" value="0" />
          </label>
        </div>
        <div id="catalog" class="catalog"></div>
        <div class="meta" id="meta">Loading 3D person…</div>
      </aside>
    </main>
  </div>

  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
      }
    }
  </script>
  <script src="/assets/static-api.js"></script>
  <script type="module" src="/assets/studio3d.js"></script>
</body>
</html>