第 28 课 Three.js 入门只抓够用的：3D 课件第一版怎样最稳
本课定位
3D 是创意课件里最容易让人兴奋也最容易劝退的部分，所以这节课只抓够用的第一版。
学习目标
- 理解 Three.js 在课堂里的作用
- 会做一个最小 3D 页面
- 知道 3D 页面最先该保住什么
阅读方式
建议按下面的“60 分钟顺序”往下阅读。每个时间段里，都已经把本段任务、参考资料、可直接使用的模板和阶段成果编排在一起，方便老师顺着一节课的节奏阅读，不必在不同板块之间来回查找。
学习目标拆开来看
理解 Three.js 在课堂里的作用
这一项目标放在本课里，主要是帮助老师把“理解 Three.js 在课堂里的作用”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
会做一个最小 3D 页面
这一项目标放在本课里，主要是帮助老师把“会做一个最小 3D 页面”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
知道 3D 页面最先该保住什么
这一项目标放在本课里，主要是帮助老师把“知道 3D 页面最先该保住什么”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
课前准备
- 准备一个适合 3D 的学科内容
- 写下只保住的一个观察点
- 明确页面不做哪些复杂功能
按 60 分钟顺序展开
0-10 分钟
本段任务
用《3D 页面第一版最小结构》开场，让老师先进入 Three.js 入门只抓够用的：3D 课件第一版怎样最稳 这个具体教学场景。
本段重点
- 关联目标：理解 Three.js 在课堂里的作用
- 关键提醒：3D 页最重要的是“看懂”，不是“功能多”。
教学意图
开头先把课堂情境和真实需求立住。只要老师先看见“这和我的课堂有什么关系”，后面的页面和技术动作就不会显得漂浮。
本段参考资料
3D 页面第一版最小结构
3D 对象、视角控制、标签、老师追问区先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经能说清楚：这节课真正要解决的课堂问题是什么。
10-20 分钟
本段任务
把本课最关键的判断线讲清楚，先帮助老师看见这一类课件最容易做偏在哪里。
本段重点
- 关联目标：会做一个最小 3D 页面
- 关键提醒：先保住视角、对象和标签，已经足够做出第一版。
教学意图
这一段的重点不是堆知识点，而是把“该先抓哪一条主线”讲清楚。只有先把判断线立起来，后面的执行模板和页面实现才更容易稳住。
本段参考资料
刚上手 Three.js 最该避开的事
1. 一次做太多对象
2. 动画太快
3. 没有标签和讲解区
4. 试图做完整游戏场景先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经知道：这类课件最值得先抓住的主线和最容易失手的地方。
20-35 分钟
本段任务
讲师现场示范一轮，把老师最关心的这一页或这一组页面先做出来。
本段重点
- 关联目标：知道 3D 页面最先该保住什么
- 关键提醒：课堂里的 3D 页必须尊重时间和投屏限制。
教学意图
示范段的意义是让老师看见第一版通常怎样开工、怎样收住，而不是看一个远离自己课堂的完美案例。
本段可直接使用的模板
直接做一个最小 3D 页面
请直接帮我做一个最小 3D 网页课件。
主题：初中化学甲烷分子结构
要求：
1. 页面中间有一个可旋转的 3D 分子
2. 页面右侧显示中文标签说明
3. 页面底部有老师追问区
4. 只做最小版本，先保住清楚、稳定、适合投屏
请直接按 Three.js 给完整代码。正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经完整看过一轮示范，知道第一版通常怎样跑起来。
35-50 分钟
本段任务
老师拿自己的课题或材料跟做一轮，先做出一版可继续修改的结果。
本段重点
- 关联目标：知道 3D 页面最先该保住什么
- 关键提醒：课堂里的 3D 页必须尊重时间和投屏限制。
教学意图
真正形成能力的关键，往往就在这一段。先做出第一版，再回头调整页面、素材和老师说法，通常比一开始就求全更稳。
本段可直接使用的模板
帮我给 3D 页加一个视角按钮
我已经有一个最小 3D 页面了。
请再给它加两个按钮：
1. 看正面
2. 看侧面
切换以后视角要稳定，方便老师讲。正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经拿自己的材料做出一版结果，并知道接下来优先改哪里。
50-60 分钟
本段任务
快速点评、收束方法，并把本课成果收成 一个最小 3D 课件页。
本段重点
- 关联目标：知道 3D 页面最先该保住什么
- 关键提醒：课堂里的 3D 页必须尊重时间和投屏限制。
教学意图
最后这一段不再加新东西，而是把今天的方法收回到老师自己的工作里，知道哪些成果值得带走、哪些地方下次还要继续打磨。
阶段成果
- 老师已经带走本课产出：一个最小 3D 课件页
关键讲授点
讲授点 1
3D 页最重要的是“看懂”，不是“功能多”。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 2
先保住视角、对象和标签，已经足够做出第一版。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 3
课堂里的 3D 页必须尊重时间和投屏限制。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
本课最容易踩的坑
最常见的误区
这类任务最常见的问题，不是完全不会做，而是容易一上来就做太满、做太散，或者把应该由老师自己最后判断的部分也一起丢掉了。Three.js 入门只抓够用的：3D 课件第一版怎样最稳 这一课的关键，就是把这条界线和处理顺序重新拉清楚。
更稳妥的做法
- 先从自己最熟的一页或一个场景开始，不要一上来就做完整大项目。
- 先把第一版跑出来，再逐项检查课堂节奏、知识点准确度和页面可用性。
- 如果需要升级技术，先确认课堂价值和设备条件，再决定要不要继续往上加。
本课产出
- 一个最小 3D 课件页
课后任务
- 把今天的 3D 页面换成你学科里最值得立体化的内容。
- 保留一个核心视角，不要贪多。
自学阅读顺序
- 先顺着 60 分钟顺序快速读一遍，先建立本课节奏感。
- 第二遍回看本课两段可直接使用的模板，把其中的年级、课题、页面要求换成自己的真实内容。
- 最后只保住一个最值得先做的页面或一个最小版本，先把它跑通。
讲师提醒
- 这一课不能讲得太吓人。
- 始终强调第一版先求稳。
下一课衔接
下一课会继续推进到 第 29 课 学科 3D 专题：分子、几何体、天体和装置结构怎么讲得更清楚，把今天形成的结果往下一步课程里接起来。