动态截面 · 三点定面

教学目标

帮助学生建立“不共线的三点确定唯一平面”与“平面与几何体相交得到截面”的直观联系：正方体被一个平面截切，截面是一个凸多边形，其边数取决于平面与正方体几个面（棱）相交。

模型设定

• 正方体 $ABCD\text{-}{A}_1{B}_1{C}_1{D}_1$，边长 1，中心在原点，竖直线为 $z$ 轴。
• 在三条互不共顶点的棱上各取一点：
  • $P\in AB$（底面前棱）
  • $Q\in C{C}_1$（后右竖棱）
  • $R\in A_1{D}_1$（顶面左棱）
• 过点 $P,Q,R$ 作平面 $\pi$。

交互方式

• 拖拽彩色圆点（$P$ 红、$Q$ 绿、$R$ 蓝）沿所在棱滑动 —— 即手势控制点位；
• 平面 $\pi$ 实时更新，黄色高亮即正方体被截出的截面；
• 拖拽空白处旋转视角、滚轮缩放；右上角可切“AR 模式”（需 HTTPS + Hiro 标记）。

截面边数规律（程序自动计算）

算法：求平面 $\pi$ 与正方体 12 条棱的交点，将交点按平面内极角排序，用三角扇生成凸多边形。

• 当 $\pi$ 只穿过选中的 3 条棱 → 三角形（截去一个角）；
• 当 $\pi$ 同时穿过更多棱 → 四边形 / 五边形 / 六边形；
• 移动点位即可在几种截面间连续切换，直观看到“边数随位置变化”。

课堂建议

1. 先让三点都取中点，观察截面（通常为六边形或四边形）；
2. 把 $P$ 拉向 $A$，看截面如何退化为三角形（截去一角）；
3. 讨论“为什么正方体的截面最多是六边形？”（平面最多与 6 个面相交）。

技术说明

• 复用 ../vendor/ 下已本地化的 Three.js r149 + AR.js 3.4.6 依赖；
• 截面计算纯前端实时完成，无需联网；
• 3D 交互模式在 HTTP 下即可使用；AR 叠加需 HTTPS 或 localhost（浏览器安全策略）。