第 23 课 学科 3D 专题：分子、几何体、天体与实验装置
本课定位
围绕数学、物理、化学常见的空间对象，做出真正能用于学科课堂的 3D 专题页。
本课技术框架
- Three.js
- 模型结构设计
- 标签系统
- 教师演示控制
学习目标
- 完成一个学科 3D 专题课件
- 掌握 3D 课件的讲解逻辑与页面组织
- 知道如何避免 3D 课件只好看不好讲
课前准备
- 从数学、物理、化学中选一个 3D 课题
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 对比“泛 3D 演示”与“真正服务教学的 3D 课件” | 对比“泛 3D 演示”与“真正服务教学的 3D 课件” |
| 10-20 分钟 | 讲 3D 页的标签、步骤、视角和提问设计 | 讲 3D 页的标签、步骤、视角和提问设计 |
| 20-40 分钟 | 用 Codex 完成一个学科 3D 页 | 用 Codex 完成一个学科 3D 页 |
| 40-55 分钟 | 加教师控制按钮与学生观察任务 | 加教师控制按钮与学生观察任务 |
| 55-60 分钟 | 互看并判断是否真能上课 | 互看并判断是否真能上课 |
核心讲授点
- 3D 页如果没有讲解逻辑，很容易变成转来转去但学生没学到东西
- 标签、预设视角和观察任务是 3D 教学成功的关键
- 最好把 3D 页嵌进整节课流程里，而不是单独孤立存在
课堂案例
三维几何体剖切 / 分子结构拆解 / 光学装置 3D 页
让老师围绕不同学科选择最适合的 3D 专题。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“学科 3D 专题：分子、几何体、天体与实验装置”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 备选主题 A：立方体剖切观察
- 备选主题 B：甲烷分子结构拆解
- 备选主题 C：凸透镜实验装置 3D 预览
- 页面需求：预设视角按钮、标签说明、教师提问点、学生观察任务
- 本次要做的课件：一个真正能用于学科讲解的 3D 专题页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 备选主题 A：立方体剖切观察
- 备选主题 B：甲烷分子结构拆解
- 备选主题 C：凸透镜实验装置 3D 预览
- 页面需求：预设视角按钮、标签说明、教师提问点、学生观察任务
- 本次要做的课件：一个真正能用于学科讲解的 3D 专题页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css提示词 3：升级成 3D 教学版
text
请把这个课件升级成 3D 教学版，让核心对象可以旋转、缩放、切换视角，并带中文标签和讲解区。
请直接把课件做出来。
这次课件的要求如下：
- 备选主题 A：立方体剖切观察
- 备选主题 B：甲烷分子结构拆解
- 备选主题 C：凸透镜实验装置 3D 预览
- 页面需求：预设视角按钮、标签说明、教师提问点、学生观察任务
- 本次要做的课件：一个真正能用于学科讲解的 3D 专题页
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个可运行的 Three.js 网页课件项目
- 优先用 Vite 组织文件
- 至少包含这些文件：index.html、src/main.js、src/style.css本课交付物
- 一份学科 3D 专题课件
创意扩展
- 加入时间轴动画
- 加入“猜测下一个视角看到什么”互动