最后更新：2026-09-04 00:01

实验17 粒子特效¶

难度：★★☆　|　预估时长：90 分钟

17.1 实验目的¶

知识目标：理解 Three.js 创建 3D 场景、飞船、小行星、星云粒子和辉光后期效果的基本思路；理解 MediaPipe Hands 调用摄像头识别手部关键点并映射为飞船控制参数的流程。
技能目标：能使用 Live Server 或本地 HTTP 服务启动前端网页项目；能通过修改少量 JavaScript 参数改变飞行速度、障碍物数量、生命值、星云颜色、辉光强度等效果。
素养目标：了解网页项目本地依赖化、压缩打包提交的工程规范，能独立处理常见浏览器权限问题。

17.2 实验环境¶

类别	要求
操作系统	Windows 10 或 Windows 11
浏览器	Chrome 或 Edge，建议使用最新版
编辑工具	Visual Studio Code
运行插件	Live Server 插件，或使用 python -m http.server
项目文件	飞船模拟V2.html、libs 文件夹、package.json、package-lock.json
硬件权限	摄像头权限；屏幕共享权限；如需音频联动，屏幕共享时勾选共享音频

17.3 实验重难点¶

重点：使用 Live Server 启动本地网页；识别项目文件结构；通过修改简单参数改变 3D 粒子特效和飞船模拟效果。
难点：浏览器摄像头和屏幕共享授权；ES Module 不能直接双击 file:// 稳定运行；MediaPipe wasm 文件必须放在正确的本地路径。

17.4 实验内容¶

17.4.0 实验流程总览¶

graph LR
    A[项目文件<br>认识] --> B[Live Server<br>运行网页]
    B --> C[启动授权<br>操作]
    C --> D[代码修改<br>5项任务]
    D --> E[项目打包<br>提交]

17.4.1 项目文件认识¶

1. 任务描述

认识本项目的主要文件，理解哪些文件必须一起保留。

2. 实验步骤

步骤 1：打开项目文件夹 C:\Users\你的用户名\Desktop\555。
步骤 2：确认存在"飞船模拟V2.html"，这是本次实验的主页面。
步骤 3：确认存在 libs 文件夹，这是 Three.js 与 MediaPipe 的本地依赖目录。
步骤 4：确认不要删除 libs 文件夹，否则页面会出现模块或 wasm 文件加载失败。

项目核心结构：

飞船模拟V2.html
libs/three/three.module.js
libs/three/examples/jsm/
libs/mediapipe/hands/
libs/mediapipe/camera_utils/camera_utils.js

17.4.2 使用 Live Server 运行飞船模拟网页¶

1. 任务描述

通过本地 HTTP 服务运行网页，避免直接双击 HTML 导致模块加载或权限异常。

为什么不能直接双击 HTML 文件运行？

本项目用了 ES Module 本地依赖，双击打开走的是 file:// 方式，浏览器会把模块文件拦下来；Live Server 相当于在你电脑上开了个「小网站」，走 http:// 方式才能把依赖正常加载进来。

2. 实验步骤

步骤 1：打开 VS Code，选择"文件 -> 打开文件夹"，打开项目目录。
步骤 2：如果没有安装 Live Server，点击扩展，搜索 Live Server 并安装。
步骤 3：在左侧文件列表中右键"飞船模拟V2.html"，选择 Open with Live Server。
步骤 4：浏览器打开后，地址应类似 http://127.0.0.1:5500/飞船模拟V2.html 或 http://localhost:5500/飞船模拟V2.html。
步骤 5：不要使用 file:/// 开头的地址运行本项目。

备用启动方式：如果没有 Live Server，可在项目目录终端执行以下命令：

python -m http.server 5500 --bind 127.0.0.1

然后在浏览器访问：

1	`http://127.0.0.1:5500/飞船模拟V2.html`

常见错误与排错

若页面一片空白：确认浏览器地址是 localhost / 127.0.0.1 开头，而不是 file:/// 开头；
若提示模块或 wasm 加载失败：检查 libs 文件夹是否完整存在。

17.4.3 启动与授权操作¶

1. 任务描述

进入飞船模拟页面，完成摄像头与屏幕共享授权。

为什么要允许摄像头和屏幕共享？

游戏把手势当「手柄」：摄像头负责识别手掌张合控制飞船速度，屏幕共享负责采集画面驱动特效联动，两个权限缺一个功能就少一半。

2. 实验步骤

步骤 1：页面出现 CINEMATIC ENGINE v2.0 后，点击 IGNITE ENGINES。
步骤 2：浏览器询问摄像头权限时，点击允许。
步骤 3：浏览器弹出屏幕共享窗口时，选择一个屏幕或浏览器标签页。
步骤 4：如果需要音频驱动速度变化，在共享窗口中勾选"共享音频"。
步骤 5：进入画面后，尝试张开或合拢手指，观察飞船速度和 HUD 线框变化。
步骤 6：移动手掌位置，观察飞船左右、上下移动。

运行效果应包括：飞船、星云粒子、小行星、黑洞引力提示、生命值和速度状态条。

常见错误与排错

若摄像头不可用：刷新页面重新允许权限，或关闭占用摄像头的其他软件；
若屏幕共享失败：重新点击按钮，再次选择共享屏幕或标签页。

17.4.4 常见问题处理¶

问题	原因	处理方法
页面空白	没有通过 localhost 启动，或 libs 路径缺失	使用 Live Server 打开；检查 libs 文件夹是否存在
摄像头不可用	浏览器权限被拒绝或摄像头被其他软件占用	刷新页面，重新允许权限；关闭占用摄像头的软件
屏幕共享失败	未授权 getDisplayMedia	点击按钮后重新选择共享屏幕或标签页
没有音频联动	共享屏幕时没有勾选共享音频	重新启动页面并勾选共享音频
wasm 加载失败	MediaPipe 文件没有复制完整	检查 libs/mediapipe/hands 中是否有 .wasm、.data、.tflite 文件
页面卡顿	粒子、小行星数量较多或显卡性能不足	降低小行星数量、降低像素比或关闭其他占用 GPU 的程序

17.4.5 代码修改任务一：修改飞船基础速度¶

1. 任务描述

通过修改一个常量改变飞船初始速度。

为什么改一个数字飞船就变快？

BASE_SPEED 是速度常量，像一个「速度旋钮」：数值越大，飞船每一帧移动的距离越远，看起来就越快。

2. 实验步骤

步骤 1：使用 Ctrl + F 搜索 BASE_SPEED。
步骤 2：找到以下代码：

const BASE_SPEED = 2.0;

步骤 3：把 2.0 改为 4.0，保存文件。
步骤 4：刷新浏览器页面，重新点击 IGNITE ENGINES，观察飞船基础速度是否变快。
步骤 5：思考：如果把 2.0 改为 0.8，飞行体验会发生什么变化？

常见错误与排错

若修改后页面没变化：先按 Ctrl + S 保存文件，再刷新浏览器并重新点击 IGNITE ENGINES。

17.4.6 代码修改任务二：修改小行星数量¶

1. 任务描述

通过修改循环次数改变障碍物密度。

2. 实验步骤

步骤 1：使用 Ctrl + F 搜索 for(let i=0; i<150。
步骤 2：找到以下代码：

for(let i=0; i<150; i++) {

步骤 3：把 150 改为 80，保存并刷新页面，观察小行星是否减少。
步骤 4：再尝试把 150 改为 220，观察画面是否更密集、是否更卡顿。
步骤 5：注意：数量越大，GPU 压力越高，课堂电脑性能较弱时建议保持在 80 到 180 之间。

17.4.7 代码修改任务三：修改星云颜色¶

1. 任务描述

通过修改颜色值改变星云粒子视觉风格。

0x3366ff 是什么？

十六进制颜色就像「颜料编号」：格式为 0xRRGGBB，依次表示红、绿、蓝三种颜色的分量，三个数字调一调就能调出不同颜色。

2. 实验步骤

步骤 1：使用 Ctrl + F 搜索 color: 0x3366ff。
步骤 2：找到以下代码：

color: 0x3366ff

步骤 3：将其改为 0xff3366，保存并刷新页面。
步骤 4：也可以尝试 0x33ffaa、0xffcc33、0x8844ff 等颜色。
步骤 5：说明：0x3366ff 是十六进制颜色，格式为 0xRRGGBB。

常见错误与排错

若改完颜色没变化：确认改的是星云粒子的 color 字段，且文件已保存、页面已刷新。

17.4.8 代码修改任务四：修改飞船生命值¶

1. 任务描述

通过修改初始生命值和碰撞扣血量调整游戏难度。

2. 实验步骤

步骤 1：使用 Ctrl + F 搜索 hullHealth。
步骤 2：找到以下代码：

let hullHealth = 100;
hullHealth -= 2;

步骤 3：把初始生命值 100 改为 200，保存并刷新页面。
步骤 4：把碰撞扣血量 2 改为 5，观察碰撞后生命值下降是否更明显。

17.4.9 代码修改任务五：修改辉光强度¶

1. 任务描述

调整 UnrealBloomPass 参数，改变引擎和高亮物体的发光强度。

2. 实验步骤

步骤 1：使用 Ctrl + F 搜索 UnrealBloomPass。
步骤 2：找到以下代码：

const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 2.5, 0.8, 0.5);

步骤 3：将 2.5 改为 1.0，保存并刷新，观察辉光是否变弱。
步骤 4：将 2.5 改为 4.0，保存并刷新，观察辉光是否变强。
步骤 5：提示：参数过大可能导致画面过曝，建议记录自己认为最合适的数值。

常见错误与排错

若画面白茫茫一片：辉光参数改得过大导致过曝，把数值调小后保存刷新即可恢复。

17.4.10 项目打包与提交¶

1. 任务描述

将网页项目整理为可提交的压缩包。

2. 实验步骤

步骤 1：确认飞船模拟V2.html 可以通过 Live Server 正常运行。
步骤 2：确认 libs 文件夹存在，且本地依赖加载正常。
步骤 3：选中飞船模拟V2.html、libs 文件夹、作业截图，压缩为 zip 文件。
步骤 4：不要提交 node_modules 文件夹，体积较大且不是运行所必需。
步骤 5：压缩包命名格式建议：班级-姓名-飞船模拟实验.zip。

常见错误与排错

提交前自查：压缩包内必须包含飞船模拟V2.html 和 libs 文件夹，否则老师解压后网页跑不起来。

17.5 实验总结¶

本次实验掌握了以下要点：

一是理解了 Three.js 场景构建与 MediaPipe 手势识别、屏幕音频输入的基本流程（对应知识目标）；
二是能使用 Live Server 或本地 HTTP 服务正确启动飞船模拟网页，并完成摄像头、屏幕共享授权（对应技能目标）；
三是能通过修改基础速度、小行星数量、星云颜色、生命值、辉光强度五处参数改变交互效果（对应技能目标）；
四是了解了本地依赖化与压缩打包提交规范，能排查页面空白、权限拒绝等常见问题（对应素养目标）。

17.6 作业提交¶

提交地点：吾爱作业网
提交资料：
飞船模拟运行成功截图至少 1 张，要求能看到飞船或粒子特效画面。

17.7 课堂提示词参考¶

如果需要让大模型辅助解释或改代码，可以使用以下提示词：

1	`请解释这个 Three.js 飞船模拟网页中 BASE_SPEED、hullHealth、UnrealBloomPass 和小行星循环数量分别控制什么效果。要求用适合初学者的语言说明。`

1	`请基于这份飞船模拟V2.html，告诉我如何增加一个"简单/普通/困难"难度选择，不要重写整个项目，只说明需要修改哪些位置。`

17.8 知识检测¶

[ ] （填空）本项目必须使用______或本地 HTTP 服务启动，不能直接双击 HTML 运行。（Live Server）
[ ] （填空）控制飞船基础速度的常量名是_。（BASESPEED）
[ ] （选择）下列哪种操作会导致模块或 wasm 文件加载失败？A. 使用 localhost 访问　B. 删除了 libs 文件夹　C. 允许摄像头权限　D. 共享屏幕时勾选音频

查看解析

正确答案：B。libs 是 Three.js 与 MediaPipe 的本地依赖目录，删除后页面会出现模块或 wasm 文件加载失败。

[ ] （填空）星云颜色 0x3366ff 中的 0x 表示该数值是______进制。（十六）

本课相关资源¶

序号	资源名称	类型	说明
1	实验17- 飞船模拟粒子特效网页实现与本地运行.docx	Word	实验原始文档
2	1我和你爱心.py	代码
3	2汇聚粒子爱心.py	代码
4	3上岸弹窗.py	代码
5	python-3.10.6-amd64.exe	软件	软件工具
6	VSCodeUserSetup-x64-1.107.1.exe	软件	软件工具
7	实验17-0602-粒子特效.rar	RAR	学习素材/数据集
8	实验17-粒子特效.7z	7Z	学习素材/数据集
9	实验17-粒子特效.zip	ZIP	学习素材/数据集
10	实验17-飞船模拟V2-游戏使用说明.pdf	PDF	参考文档
11	实验17-飞船模拟V2.html	HTML
12	实验17-星级穿越长.mp3	音频	音频素材
13	实验17-星际穿越1.mp3	音频	音频素材

视频/音频素材¶

实验素材下载

点击下方链接获取本节课全部资源（含课件、任务清单、安装包等）： 🔗 夸克网盘