大功告成

2026-03-27 17:10:41 +08:00
parent 22a5f31847
commit f24de38e94
30 changed files with 2310 additions and 404 deletions
@@ -8,11 +8,44 @@
 </head>
 <body>
  <main class="wrap">
-    <h1>可视化语音聊天系统</h1>
+    <h1>3D 数字人语音聊天系统</h1>
    <p id="status">状态：启动中</p>
-    <div class="video-box">
-      <video id="remoteVideo" autoplay playsinline></video>
+    <div class="stage-box">
+      <div class="stage-copy">
+        <strong>Three.js + VRM 驱动舞台</strong>
+        <span id="animationConn">未连接</span>
+      </div>
+      <div class="stage-toolbar">
+        <label class="file-pill" for="modelFile">载入本地 VRM/GLB</label>
+        <input id="modelFile" type="file" accept=".vrm,.glb,.gltf" />
+        <input id="modelUrl" type="text" placeholder="输入 VRM/GLB/GLTF 地址，例如官方示例 VRM 或 /web/models/avatar.vrm" />
+        <button id="loadModelBtn">加载模型 URL</button>
+        <button id="resetViewBtn">重置视角</button>
+      </div>
+      <div class="canvas-shell">
+        <canvas id="avatarCanvas"></canvas>
+        <div class="canvas-overlay">
+          <div class="overlay-card">
+            <span>模型状态</span>
+            <strong id="modelStatus">使用调试头像</strong>
+          </div>
+          <div class="overlay-card">
+            <span>驱动器</span>
+            <strong id="animationDriver">--</strong>
+          </div>
+          <div class="overlay-card">
+            <span>最近帧数</span>
+            <strong id="animationFrames">0</strong>
+          </div>
+        </div>
+      </div>
+      <div class="stage-metrics">
+        <div><span>当前模型</span><strong id="modelName">debug-avatar</strong></div>
+        <div><span>动画缓冲</span><strong id="animationBuffer">0</strong></div>
+      </div>
+      <pre id="animationPreview">等待动画控制数据...</pre>
    </div>
+    <audio id="remoteAudio" autoplay></audio>
    <div class="actions">
      <button id="healthBtn">检查服务状态</button>
      <button id="offerBtn">连接 WebRTC</button>
@@ -45,12 +78,24 @@
      <div class="metric"><span>打断耗时</span><strong id="mBargeIn">0 ms</strong></div>
      <div class="metric"><span>输入模式</span><strong id="mInputMode">none</strong></div>
      <div class="metric"><span>VAD触发</span><strong id="mVadCount">0/0</strong></div>
+      <div class="metric"><span>动画客户端</span><strong id="mAnimClients">0</strong></div>
+      <div class="metric"><span>动画驱动</span><strong id="mAnimDriver">--</strong></div>
+      <div class="metric"><span>最近动画帧</span><strong id="mAnimFrames">0</strong></div>
    </div>
    <div class="panel">
      <h3>运行状态</h3>
      <pre id="output"></pre>
    </div>
  </main>
-  <script src="/web/app.js"></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
+        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/",
+        "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.5.1/lib/three-vrm.module.min.js"
+      }
+    }
+  </script>
+  <script type="module" src="/web/app.js?v=20260327d"></script>
 </body>
 </html>