Skip to content

Ensure camera prompt fires with user-gesture fallback #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aoody743 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Ensure camera prompt fires with user-gesture fallback #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,20 @@
# StellarWeb
Stellar Website for testing

一个使用 Three.js + MediaPipe 打造的实时 3D 粒子「土星」实验，支持手掌张合来控制星环的收束与扩散。

## 功能亮点
- 手势驱动：张开手掌放大、扩散粒子，握拳收拢，实时平滑响应。
- 物理直觉：粒子环按照开普勒定律计算角速度，展现近似真实的轨道运动。
- 视觉表现：粒子构成的土星核心与环带，亮度会随尺度改变；极大时叠加高频布朗噪点，让粒子「炸开」。
- 现代界面：全屏切换按钮、磨砂玻璃 HUD，摄像头画面微透叠加。

## 本地运行
无需打包工具，直接用任意静态服务器打开根目录即可（需 HTTPS 或 localhost 以启用摄像头权限）。例如：

```bash
python -m http.server 8000
# 或
npx serve .
```

然后在浏览器访问 `http://localhost:8000`，页面会自动触发摄像头授权；如未出现弹窗，点击页面任意位置或右上角的「重新尝试」按钮进行授权，即可体验手势交互。
31 changes: 31 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Saturn Particles</title>
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div id="app">
<div id="canvas-host"></div>
<div class="hud">
<div class="hud__group">
<div class="hud__title">Saturn Pulse</div>
<div class="hud__subtitle">张开掌心放大群星，握拳收束光环</div>
</div>
<div class="hud__group hud__status">
<span class="status-chip" id="gesture-indicator">正在主动申请摄像头权限…如未看到弹窗，轻触页面</span>
<button id="start-btn" class="pill" aria-label="重新尝试授权">重新尝试</button>
<button id="fullscreen-btn" aria-label="全屏">⤢ 全屏</button>
</div>
</div>
<video id="input-video" autoplay playsinline muted></video>
</div>

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils@0.3/camera_utils.js" crossorigin></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands@0.4/hands.js" crossorigin></script>
<script type="module" src="./main.js"></script>
</body>
</html>
Loading