挥拍吧！羽毛球训练营

作品简介与玩法

控制 3D 小球员，练习找落点、抓时机和连续接球。方向键或 A / D 移动，空格挥拍，P 暂停；触屏使用画面按钮。每轮十球，记录得分、接球率与最长连击。

第一课自动回球，只练移动；第二课固定位置，只练时机；第三课组合两项能力。

制作工具与技术栈

Blender 制作人物与球拍，导出 GLB；Codex / AI 编程助手辅助拆解需求与编写代码；Three.js 绘制 3D 场景，React + TypeScript 构建交互界面，Node.js、npm 与 Vite 用于开发和打包。以下五课保留原制作入门全文。

制作步骤

从需求、建模、模型加载，到交互判定与发布检查，依次阅读五课。

把想法说清楚

先确定要教什么，再决定游戏有什么功能。本案例从挥拍照片出发，做出全身小球员，再练习找落点、抓时机与连续接球。

准备这些工具

• Blender：制作人物、球拍与材质，保存 .blend 工程。
• Codex / AI 编程助手：协助拆解需求、编写 Blender Python 脚本和网页代码、解释错误。
• Three.js：在浏览器绘制球场、加载模型、更新来球轨迹。
• React + TypeScript：制作课程、按钮、分数和报告面板。
• Node.js、npm、Vite：在开发电脑安装依赖、预览与打包网页。
• 浏览器：玩家只需支持 WebGL 的浏览器，不必安装 Blender 或 Node.js。

给 AI 的需求示例

参考照片中的男生制作风格化全身模型，保留白色上衣、深色短裤、运动鞋和挥拍姿态。人物与球拍部件分别命名。保存 Blender 工程并导出 GLB。再做三个教学关卡，支持键盘和触屏，每球给出具体反馈。

小练习：写下想教的一个动作、玩家的一种操作，以及成功时应该看到的反馈。

在 Blender 中搭出角色

先观察头身比例、腿部重心和握拍方向。照片看不到背面与完整深度，需要合理补全，不能当作精确扫描。

1. 用球体、锥体等基础网格搭出头部、躯干、四肢与鞋子，再调整比例。
2. 分别设置皮肤、头发、白色上衣、深色短裤与运动鞋的材质。
3. 用曲线制作椭圆拍框、拍杆与网线，将握拍手放在拍柄上。
4. 清楚命名挥拍上臂、前臂、拍框和拍杆，便于网页代码找到并控制。
5. 加入灯光、相机，检查正面、侧面与脚底接地情况，保存 .blend 文件。

本案例用 Blender Python 脚本建立风格化模型，没有调用图片自动转 3D 服务。也可以手工建模，或让 AI 辅助生成脚本，再在 Blender 中检查修正。

小练习：旋转视角，检查握拍手、膝盖和鞋底，调整一个连接位置。

让模型出现在浏览器

.blend 是可编辑工程；.glb 是 glTF 的二进制形式，可以将模型网格与纹理等资源装进一个文件，方便网页加载。部分 Blender 效果不会原样导出，需要重新检查。

1. 选择人物和球拍，在 Blender 中使用 glTF 2.0 导出，选择 GLB；按需要只导出选中对象。
2. 去掉无关背景，先使用简单材质，控制模型体积。
3. 把模型放在网页项目的 public 目录，通过 GLTFLoader 加载。
4. 调整朝向、比例与地面高度，再检查颜色、遮挡和阴影。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const gltf = await new GLTFLoader().loadAsync('/models/boy.glb');
scene.add(gltf.scene);

示例路径需要替换成模型实际发布的位置。网页放在子栏目时，特别注意资源路径，避免页面打开了而人物不出现。

小练习：先在一个空场景中加载 GLB，确认人物完整出现，再开始做游戏。

官方参考：Blender glTF 导出说明 · Three.js GLTFLoader

把展示变成教学游戏

先让“一球能接”，再做完整的一轮练习。每帧更新球员和羽毛球的位置，结合站位和出手时间判断回球。

1. 移动：方向键、A / D 与触屏按钮控制同一套左右移动逻辑。
2. 来球：选择目标位置，让羽毛球从对面飞来，用地面光圈提示站位。
3. 挥拍：空格或按钮触发动作，比较球员与目标的距离，再判断时机。
4. 反馈：区分站位错误、挥早、挥晚和成功回球，给出下一球可执行的建议。
5. 报告：记录十球得分、接球率与最长连击，支持暂停、继续和重练。

第一课自动回球，只练移动；第二课固定位置，只练时机；第三课组合两项能力。本作品通过部件分组驱动简化挥拍，没有完整的人体骨骼动画。

绿色时机区间和站位容差是游戏教学规则，不是精确体育测量。真实握拍、发力与步法仍需现场练习。

小练习：故意早挥、晚挥和站错位置，检查是否得到不同的提示。

公开发布，让大家体验

把页面、脚本、样式和模型一起部署，玩家打开链接就能使用。

1. 检查开始、十球结束、暂停继续、切换课程和重练流程。
2. 体验触屏操作，检查按钮大小与文字是否清晰。
3. 测试击球判定和连击统计，确认失误会重置连击。
4. 构建网站，将产物部署到栏目目录，确认模型和脚本没有指向本地电脑。
5. 用不带登录信息的请求检查页面和资源，确认全站导航已有入口。

npm install
npm run build

这些命令用于本案例的开发项目，访客无需执行。公开访问意味着无需制作人的账号也能打开游戏。

毕业任务：设计一个新练习，只改变一个变量，例如来球速度，并解释它训练什么能力。

关键实现要点

GLTFLoader 加载模型；用部件分组驱动简化挥拍。移动与出手时间共同参与回球判定，反馈区分站位错误、挥早、挥晚和成功回球。

局限说明

照片看不到的背面与深度经过补全，不是精确扫描。角色没有完整骨骼动画，站位容差和时机区间是教学近似，不能替代真实步法与挥拍练习。

给 AI 的需求示例

以下是练习用需求，不是新增功能的完成声明。

为这个羽毛球教学游戏调整来球速度。保留三种练习模式、十球报告和触屏操作。先解释速度会怎样影响站位与挥拍判定，再检查早挥、晚挥和站错位置的反馈。

小练习

依次完成五课中的小练习。最后只改变来球速度这一个变量，再体验三种练习模式，说明改变后训练的能力。