1. 设计初衷
五年级“长方体和正方体”单元中，正方体展开图是一大难点。教材列出了11种展开图，但学生很难在脑海中完成“平面→立体”的转换。常见困惑包括：为什么“田”字形不行？为什么对面一定相隔一格？
根本原因在于：学生缺少对“体”与“面”之间动态关系的直观体验。静态图片只能呈现结果，无法展示“拆开”和“拼合”的过程。
因此需要一个可交互的3D正方体，学生能独立控制每一个面——让任意一个面沿法线方向平移出去，再平移回来，从而清楚看到每个面在原立方体中的位置、朝向以及与相邻面的连接关系。这种“拆解式”学习比单纯观察展开图更能建立空间观念。
2. 解决方案
开发一个“正方体拆解实验室”HTML交互工具：
使用Three.js构建一个棱长为1的立方体，六个面用不同颜色半透明材质区分，每个面独立可动。
支持鼠标/手指拖拽旋转、缩放视角，方便从任意角度观察。
核心交互：点击任意一个面，该面会沿外法线方向平滑移动约0.9个单位（展开），再次点击同一面则原路复位（折叠）。
增加“重置所有面”按钮，一键将所有已移动的面恢复原位，方便反复尝试。
每个面带有边框和CSS2D文字标签（右、左、上、下、前、后），教学指向清晰。
动画采用GSAP库，过渡流畅，手感自然。
该工具适合放在“长方体和正方体”单元的探究环节。学生先整体观察正方体，然后逐一将各个面“拆出来”，观察每个面独立时的形状和位置，再将其“装回去”。通过反复拆装，理解“一个正方体由6个完全相同的正方形面围成”，并为后续学习11种展开图打下空间想象基础。
3.分享成果
链接：https://pan.quark.cn/s/343d2d1ec641
