夜雨聆风原来《圆柱侧面积》还能这样讲，这个AI互动教具，把传统“展开图”变成了真正可以动态演示的过程，让圆柱侧面积不再只是死记公式。
一、产品简介
本工具是一款面向小学教学的互动3D课件，帮助学生直观理解 “圆柱侧面展开是长方形” 这一核心几何概念。学生可以通过调整圆柱的底面半径和高，实时观察侧面从卷曲状态逐渐展开为长方形的动态过程，并验证 侧面积 = 底面周长 × 高 的公式，让抽象的空间想象变得可视化。
二、界面布局
整体布局（左控右3D场景）
右侧3D场景区
展示圆柱体的三维模型（带金属质感）
支持鼠标拖拽旋转、缩放视角（OrbitControls）
侧面展开过程中，上部/下部圆盖会随之平移翻转，呈现完整展开逻辑
圆柱上下边缘有高亮黄色线标识底面圆周，展开时会动态卷曲
左侧控制面板（毛玻璃效果）
自上而下分为：
动态标签（场景中浮动）
高 hh 标签
底面周长 2πr2πr 标签
“周长展开”提示标签（周长验证时出现）
三、功能使用
调节圆柱尺寸
底面半径 r：拖动滑块（0.5~4.0），圆柱底面大小实时变化
高度 h：拖动滑块（1~8），圆柱高度实时变化
调节后，侧面展开的长方形宽度（周长）和高度也会同步更新
手动控制展开进度
拖动 “演示进度” 滑块，可以手动控制侧面展开程度：
0%：完全卷曲（圆柱形态）
50%：半展开状态
100%：完全展开成一个平面长方形
上/下底盖会随着进度自动平移并翻转，模拟展开时脱离圆柱体的效果
一键展开 / 暂停 / 收拢
点击 “一键展开” 按钮：
若当前进度 < 100%，动画自动从当前进度运行到 100%（展开）
若当前进度 ≥ 100%，按钮文字变为“一键收拢”，点击后动画回到 0%（收拢）
动画过程中可点击“暂停演示”暂停，再次点击继续
展开完成时，屏幕会绽放彩带特效（canvas-confetti），增加成就感
周长验证（“围成一圈”动画）
点击 “周长验证” 按钮后：
如果圆柱还未完全展开，会先自动完成展开，然后触发“周长验证”特效
圆柱上下边缘的黄色圆周线会动态卷起、围成一个圆圈，并出现“周长展开”标签
直观展示底面周长 2πr2πr 的长度与长方形宽度的关系
再次点击可收起圆周线
重置
点击 “重置” 按钮：
演示进度归零（回到完整圆柱）
收起周长验证动画
半径、高度、速度等参数不重置（仅重置动画状态）
公式学习
面板底部固定显示侧面积公式，LaTeXLATEX 渲染
教师可结合动态演示讲解：展开后的长方形，长 = 底面周长，宽 = 圆柱高，因此面积 = 周长 × 高
四、教学建议
五、注意事项
浏览器要求：需支持 WebGL（现代 Chrome、Edge、Firefox、Safari 均可），建议使用电脑端，移动端可能性能不足。
无网络可用：本课件使用 Three.js 和 MathJax 的 CDN，首次打开需要联网加载库文件；加载成功后可在无网环境下继续使用（已缓存）。如完全离线使用，需提前下载依赖包。
性能提示：半径或高度调节时模型会重新生成，流畅度与设备性能有关。若动画卡顿，可降低“演示速度”或减少模型分段数（代码中
segments: 128可修改为 64）。标签位置：3D 场景中的文字标签（高、周长）是跟随模型实时定位的，不会随摄像机旋转而改变朝向，始终面向用户。
彩带效果：仅展开完成时触发一次，不会重复触发。
配套的操作流程简单清晰，支持重复尝试与对比优化，学生不仅学会了计算，更学会了分析与选择。让课堂更有参与感，老师们快来试试吧！这块教具是可以本地化运行的html文件，不需要联网、不需要复杂的部署，直接插入希沃就可以使用，老师如果有赛课需求也可以参考这个进行定制，获奖概率倍增！
联系赵老师获得技术支持：bj1gk2（备注：教具）
