Initial commit

2025-12-08 14:22:41 +08:00
commit c83d5ded36
3 changed files with 690 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>交互式3D粒子系统</title>
+    <link rel="stylesheet" href="style.css">
+    <!-- Three.js -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
+    <!-- Tween.js -->
+    <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
+    <!-- MediaPipe Hands (使用 unpkg) -->
+    <script src="https://unpkg.com/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
+    <!-- lil-gui -->
+    <script src="https://unpkg.com/lil-gui@0.17.0/dist/lil-gui.umd.min.js"></script>
+</head>
+<body>
+    <div id="loading">加载中... (请允许摄像头权限)</div>
+    
+    <!-- 摄像头预览 (隐藏，用于计算) -->
+    <!-- 注意：不要用 display: none，否则某些浏览器不会播放视频 -->
+    <video id="input_video" style="opacity: 0; position: absolute; pointer-events: none; z-index: -1;" playsinline></video>
+    
+    <!-- 3D 容器 -->
+    <div id="canvas-container"></div>
+
+    <!-- UI 面板 -->
+    <div id="ui-container">
+        <div class="control-group">
+            <button id="fullscreen-btn">全屏显示</button>
+        </div>
+        <!-- lil-gui 将会自动挂载，或者我们可以手动挂载到这里 -->
+    </div>
+
+    <script src="main.js"></script>
+</body>
+</html>