🧩 互动数学乐园 - 立体切割与表面积可视化教学工具

通过交互式3D演示，直观理解立体几何中正方体和长方体的切割、连接与表面积变化原理

💡 项目简介

这是一个交互式 3D Web 应用程序，旨在教授立体几何概念，重点是切割和连接正方体与长方体（长方体棱镜）以及可视化表面积和体积的变化。该项目使用 Vue.js 框架结合 Three.js 库创建交互式 3D 模型。

✨ 主要特点

• 沉浸式3D演示：实时渲染的立体切割与连接过程
• 动态表面积和体积计算: 自动计算初始、接触面积、增加和最终表面积与体积
• 长方体用户输入: 长方体可自定义尺寸（长、宽、高）和位置
• 可点击交互: 通过点击高亮显示各个小块
• 动画: 平滑的动画展示切割与连接过程
• 响应式设计: 适应不同的屏幕尺寸
• 尺寸和位置标签: 动态生成尺寸和位置的标签
• 错误处理: 当输入值无效时显示错误信息
• 内部立方体切割: 支持将内部立方体从外部立方体中切割的操作

🚀 功能演示

🟪 正方体操作

正方体切割演示

• 一键动画展示3刀切割成8个小立方体
• 自动计算初始/新增/最终表面积
• 点击高亮单个小立方体
• 视角复位功能

正方体连接演示

• 展示小正方体连接成大正方体的过程
• 计算表面积如何减少
• 交互式动画效果

📦 长方体操作

长方体切割演示

• 自定义三维尺寸（长/宽/高）
• 各轴向独立设置切割点
• 实时面积计算引擎
• 智能错误检测与提示

长方体连接演示

• 演示两个长方体如何连接
• 计算连接处的接触面积
• 展示连接前后的表面积变化

长方体内切长方体演示

• 自定义内外长方体的尺寸和位置
• 演示内部长方体从外部长方体中切割的过程
• 实时计算接触面积、移除表面积和最终表面积
• 动态展示体积变化

🛠️ 技术栈

• 框架: Vue.js 3.x
• 可视化引擎：Three.js v0.160.0
• 路由: Vue Router
• 前端架构:
  • ES6 Modules
  • CSS3变量系统
  • 响应式布局
• 交互组件:
  • OrbitControls 视角控制
  • Raycaster 点击检测
• 数学:
  • 几何切割算法
  • 表面积与体积计算模型

📁 项目结构

主要目录

• src/: 源代码目录
  • views/: 包含所有视图组件
    • CubeCutView.vue: 正方体切割视图
    • CubeJoinView.vue: 正方体连接视图
    • CuboidCutView.vue: 长方体切割视图
    • CuboidJoinView.vue: 长方体连接视图
    • CuboidCutCuboidView.vue: 长方体内切长方体视图
    • HomeView.vue: 主页面视图
  • components/: 可复用组件
  • assets/: 静态资源
  • router/: 路由配置
  • utils/: 工具函数
  • App.vue: 根组件
  • main.js: 入口文件

🚀 如何使用

1. 选择想要体验的几何演示类型
2. 根据界面提示输入参数（尺寸、位置等）
3. 点击"开始动画"按钮观看切割或连接过程
4. 使用鼠标调整视角，查看不同角度的表现
5. 阅读计算结果，理解表面积和体积的变化原理

🎓 教育价值

本项目专为数学教育而设计，帮助学生：

• 直观理解三维空间中的几何变换
• 掌握表面积和体积计算方法
• 通过交互式体验加深对抽象概念的理解
• 培养空间思维能力

📝 许可证

MIT