请生成一个用于五年级数学上册「观察物体」教学的HTML5网页动画,要求:
1. 核心功能:
- 左侧积木仓库:提供1×1×1的正方体小方块,可无限拖拽。
- 中间3D网格场景:支持将小方块堆叠成任意立体组合,自动吸附对齐网格,可多层堆叠。
- 视角切换:提供「正面」「上面」「左面」「当前视角(斜45°)」四种视角按钮,点击后自动切换到对应正交视角。
- 辅助功能:提供「清空搭建」按钮,一键清除所有已堆叠方块;支持拖拽已放置的方块进行位置调整。
2. 教学适配:
- 界面简洁直观,符合小学生操作习惯,无复杂交互。
- 视角切换后,自动在右侧同步显示当前视角下的2D平面视图(即从该方向看到的形状图),方便对比讲解。
- 顶部显示标题:「五年级上册·观察物体」,下方标注操作提示:「从仓库拖拽方块到网格,点击切换视角观察平面形状」。
3. 技术要求:
- 使用Three.js实现3D渲染,纯前端HTML+CSS+JS,无需后端。
- 配色柔和护眼,主色调为浅蓝网格背景,方块使用暖色系(橙/棕/黄)区分层次,按钮为圆角浅灰样式。
- 响应式布局,适配教室大屏显示。