AR 立体几何交互教学案例
一、案例名称
AR 正方体模型：线面角与对角截面的可视化
二、适用场景
- 教材：人教 A 版选择性必修一 · 空间向量与立体几何
- 课题：正方体中的线面角、异面直线夹角、二面角、截面
- 课时：新课导入、难点突破、复习展示
- 硬件：教室大屏电脑（3D 预览）、学生手机 / 平板（AR 模式）
三、演示地址
- 入口：
http://8.163.92.91/教学工作/立几/ - 直接打开：
http://8.163.92.91/教学工作/立几/AR立体几何/
四、案例效果
页面呈现一个半透明的正方体 ABCD-A₁B₁C₁D₁：
- 8 个顶点标注字母，帮助学生建立空间坐标对应关系；
- 黄色高亮显示体对角线 A→C₁；
- 黄色半透明面显示对角截面 ACC₁A₁；
- 3D 预览模式：鼠标 / 手指拖拽旋转、滚轮缩放；
- AR 模式：摄像头对准 Hiro 标记，模型叠加到真实桌面上，可 360° 环绕观察。
五、技术路线
| 环节 | 技术 | 作用 |
|---|---|---|
| 3D 渲染 | Three.js r149 | 构建正方体、顶点标签、高亮截面、灯光与交互 |
| 3D 交互 | OrbitControls | 旋转、缩放、自动旋转 |
| AR 跟踪 | AR.js 3.4.6（ar-threex.mjs） | 基于 Hiro 标记的摄像头位姿估计 |
| 部署 | Quartz + Nginx | 作为静态资源托管在工作台站点内 |
六、教学价值
- 把抽象变具象：学生能在真实桌面或屏幕上“托着”正方体转，降低空间想象门槛。
- 可聚焦细节：通过高亮体对角线与截面，把“线面角”“对角面”这类抽象对象可视化。
- 课堂互动性强：学生可分组用手机扫 Hiro 标记，实现“人手一个模型”。
- 与现有课件衔接：可与站点内“正方体·线面角”“正方体·二面角”等交互课件配套使用。
七、使用步骤
方式 A：教室大屏 3D 预览（最稳，无需摄像头）
- 大屏浏览器访问
http://8.163.92.91/教学工作/立几/AR立体几何/。 - 直接用鼠标拖拽旋转，滚轮缩放。
- 点击按钮关闭“自动旋转”，锁定到讲解角度；点击“顶点标签”可开关字母。
方式 B：学生手机 AR 体验（效果最好，需 HTTPS）
- 打印 Hiro 标记：
http://8.163.92.91/教学工作/立几/AR立体几何/vendor/HIRO.jpg。 - 手机浏览器访问同一地址（需
https://或localhost，HTTP 会禁止摄像头）。 - 点击“进入 AR 模式”，对准 Hiro 标记，正方体即叠加在桌面上。
注意：当前服务器为 HTTP，AR 摄像头会被浏览器禁用。若要在校内长期稳定使用 AR 模式，建议给站点配置 SSL 证书（Let’s Encrypt）或让学生在教室局域网内用手机访问本机
https://localhost。
八、扩展方向
- 增加“正四棱锥”“长方体”等 AR 模型库；
- 添加测量按钮：点击一条棱自动显示长度、角度数值；
- 录制“AR 微课”：绿幕 + OBS 录屏，把模型嵌入 PPT。
九、相关文件
obsidian-vault/教学工作/立几/AR立体几何/index.htmlobsidian-vault/教学工作/立几/AR立体几何/vendor/quartz-home/quartz/components/styles/dashboard.scss（卡片样式.wb-tag-ar）