第 22 课 Three.js 3D 课件基础：把抽象知识做成立体课堂
本课定位
帮助老师把 3D 当作教学表达工具，而不是技术门槛，先学会用 Codex 调出可旋转、可缩放、可解释的 3D 课堂对象。
本课技术框架
- Three.js
- 相机与控制器
- 3D 对象
- 标签与讲解 UI
学习目标
- 理解 3D 课件最适合的教学场景
- 完成一个最小 Three.js 3D 课件页
- 学会把 3D 页面和普通讲解页面结合
课前准备
- 选择一个适合立体化的知识点，如分子、几何体、天体、装置
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示 3D 课件案例 | 展示 3D 课件案例，建立“为什么要 3D” |
| 10-20 分钟 | 讲解 Three.js 在教师课件中的最小使用方式 | 讲解 Three.js 在教师课件中的最小使用方式 |
| 20-40 分钟 | 用 Codex 生成一个可旋转的 3D 对象页面 | 用 Codex 生成一个可旋转的 3D 对象页面 |
| 40-55 分钟 | 加入中文标签、按钮和讲解区 | 加入中文标签、按钮和讲解区 |
| 55-60 分钟 | 讨论哪些课题值得做成 3D | 讨论哪些课题值得做成 3D |
核心讲授点
- 3D 最适合解决“平面讲不清”的空间关系问题
- 老师不需要手写复杂 Three.js，只要会给 Codex 提清楚对象、交互和讲解需求
- 3D 页应该始终配文字说明和教师控制按钮
课堂案例
立体几何体与分子结构 3D 预览页
通过两个极典型场景，让老师理解 Three.js 的教学价值。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“Three.js 3D 课件基础：把抽象知识做成立体课堂”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：甲烷分子 3D 观察
- 教学目标：学生能旋转查看分子结构，认识中心原子与键的空间分布
- 页面需求：Three.js 3D 模型、缩放旋转、中文标签、右侧讲解区
- 本次要做的课件：最小 Three.js 教学页面
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：甲烷分子 3D 观察
- 教学目标：学生能旋转查看分子结构，认识中心原子与键的空间分布
- 页面需求：Three.js 3D 模型、缩放旋转、中文标签、右侧讲解区
- 本次要做的课件：最小 Three.js 教学页面
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 3：升级成 3D 教学版
text
请把这个课件升级成 3D 教学版，让核心对象可以旋转、缩放、切换视角，并带中文标签和讲解区。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：甲烷分子 3D 观察
- 教学目标：学生能旋转查看分子结构，认识中心原子与键的空间分布
- 页面需求：Three.js 3D 模型、缩放旋转、中文标签、右侧讲解区
- 本次要做的课件：最小 Three.js 教学页面
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css本课交付物
- 一个最小 Three.js 3D 课件页
创意扩展
- 加入切面观察
- 加入分层拆解动画