40 lines
1.7 KiB
HTML
40 lines
1.7 KiB
HTML
<!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> |