3D方块搭建三视图程序

基于 JavaScript + Three.js 开发的模块化3D方块搭建程序，支持多种工作空间尺寸，实时显示四视图。

版本信息

当前版本: v1.0.0
发布日期: 2024年12月
更新内容: 正式版发布，代码架构全面重构，新增颜色模式关卡系统

核心功能

🎮 游戏模式

• 自由探索模式: 随意搭建方块，学习三视图原理，支持自定义方块颜色
• 关卡挑战模式: 根据给定三视图目标拼搭立体模型
  • 普通模式: 传统的黑白三视图匹配
  • 颜色模式: 基于方块数量的智能颜色提示系统
• 重力感应模式: 经典的方块堆叠，符合物理直觉
• 无重力模式: 层级独立操作，精确控制每一层
• 智能关卡生成: 自适应概率算法，难度随工作空间调整
• 实时验证: 颜色标识匹配状态（绿色正确、红色错误、灰色目标）
• 完成检测: 自动检测关卡完成并提示

🎯 工作区域

• 多种尺寸: 支持3×3×3、5×5×5、7×7×7、9×9×9四种工作空间
• 3D网格系统: 底面、左面、后面网格线提示
• 动态适配: 网格线和坐标轴根据尺寸自动调整

🖱️ 交互操作

• 双模式系统:
  • 重力模式: 左键在方块上方添加，右键删除顶层方块
  • 无重力模式: 层级独立操作，左键创建当前层方块，右键删除当前层方块
• 智能交互: 射线优先检测当前层方块，避免穿透和误操作
• 层级控制: +/-按钮切换操作层，蓝色网格平面指示当前层
• 撤回/重做: Ctrl+Z撤回，Ctrl+Shift+Z/Ctrl+Y重做（支持50步历史）
• 拖拽旋转: 鼠标拖拽360度旋转视角
• 滚轮缩放: 3-20倍距离范围缩放
• 键盘控制: WASD前后左右移动，↑↓上下移动，←→绕中心旋转
• 快捷键: 3-9数字键切换工作空间，字母键切换视图，C键清空
• 14视图切换: 6个标准视图+8个角视图，平滑四元数动画
• 多渲染模式: 实心、线框、透明三种显示效果

📐 四视图显示

• 透视图: 主视图，支持交互操作
• 正视图: X-Y平面投影
• 侧视图: Y-Z平面投影
• 俯视图: X-Z平面投影
• 实时同步: 四个视图同步更新
• 平滑过渡: 工作空间切换时视角动画过渡

操作指南

基本操作

1. 模式切换: 点击"自由探索"或"关卡生成"按钮切换游戏模式
2. 添加方块: 左键点击底部平面创建第一层，或点击现有方块在其上方添加
3. 删除方块: 右键点击方块删除该位置最顶层方块（符合重力）
4. 撤回/重做: Ctrl+Z撤回上一步，Ctrl+Shift+Z或Ctrl+Y重做
5. 旋转视角: 在透视图中拖拽鼠标旋转3D视角
6. 缩放视图: 使用鼠标滚轮调整视距
7. 键盘控制: WASD前后左右移动，↑↓上下移动，←→绕中心旋转
8. 视图切换: 14个预设视角（6标准+8角视图），平滑四元数动画
9. 快捷键操作:
   • 数字键3-9: 快速切换工作空间大小
   • T/B/F/K/L/R: 顶/底/前/后/左/右视图
   • 1/2/Q/E/U/I/O/P: 8个角视图
   • C键: 清空工作区
10. 关卡挑战: 在关卡模式下根据三视图提示拼搭目标模型

界面布局

• 主视图: 透视图占据界面主要区域（左侧70%）
• 辅助视图: 三个正交视图垂直排列（右侧30%）
• 控制面板: 右上角操作按钮和说明

使用方法

1. 直接在浏览器中打开 index.html
2. 使用鼠标在透视图中交互
3. 观察四个视图的实时变化

文件结构

three_views/
├── index.html          # 主页面
├── js/
│   ├── main.js            # 主入口和协调器
│   ├── scene-manager.js   # 场景管理器
│   ├── camera-manager.js  # 相机管理器
│   ├── workspace-builder.js # 工作空间构建器
│   ├── block-manager.js   # 方块管理器
│   ├── interaction-handler.js # 交互处理器
│   ├── history-manager.js # 历史管理器
│   ├── ui-manager.js      # UI管理器
│   ├── level-manager.js   # 关卡管理器
│   └── levels/            # 关卡系统模块
│       ├── level-generator.js  # 关卡生成器
│       ├── level-renderer.js   # 关卡渲染器
│       └── level-validator.js  # 关卡验证器
├── README.md          # 说明文档
└── changeme.md        # 版本更新记录

技术栈

• HTML5 + CSS3
• JavaScript ES6+
• Three.js (CDN)

技术特性

模块化架构

• 依赖注入: 各管理器通过构造函数接收app实例
• 职责分离: 每个模块只负责特定功能
• 统一接口: 主类提供代理方法保持兼容性
• 模块协调: main.js作为协调器管理各模块
• 关卡系统模块化: 拆分为生成、渲染、验证三个独立模块

坐标系统

• 右手坐标系: X轴向右（红色）、Y轴向上（绿色）、Z轴向外（蓝色）
• 动态适配: 坐标轴长度和标签位置根据工作空间大小调整
• 网格对齐: 底面、左面、后面网格线系统

交互技术

• 双模式系统: 重力模式和无重力模式智能切换
• 射线优先级: 当前层方块 > 平面交点，避免穿透问题
• 层级隔离: 无重力模式下每层独立操作，互不干扰
• 智能检测: 双面检测平面，支持全角度射线检测
• 重力系统: 只能删除最顶层方块，符合物理逻辑
• 容差匹配: 0.5单位容差范围内的精确匹配
• 撤回系统: 双栈技术实现，支持最多50步历史

视图系统

• 14视图支持: 6个标准视图（顶/底/前/后/左/右）+ 8个角视图
• 四元数动画: 1秒平滑过渡，避免视角瞬移
• 角视图: 从正方体8个角观察，提供完整立体视角
• 正交对齐: 确保切换到完全对齐的标准视图

渲染技术

• WebGL渲染: 基于Three.js的硬件加速
• 实时光照: 环境光+方向光照明系统
• 多渲染模式: 实心、线框、透明三种显示效果
• 智能碰撞: 线框模式下不可见碰撞体确保交互正常
• 场景管理: 分组管理不同类型对象

性能优化

• 代码架构优化: 代码量减少90%，维护性大幅提升
• 统一算法引擎: 所有视图生成使用配置化投影系统
• 高效检测: 射线投射精确点击检测
• 响应式设计: 自适应窗口大小调整
• 内存管理: 高效的方块创建和销毁

浏览器兼容性

• ✅ Chrome 80+
• ✅ Firefox 75+
• ✅ Safari 13+
• ✅ Edge 80+

未来规划

• 🎯 关卡难度分级系统
• 🏆 成就和积分系统
• 💾 作品保存/加载
• 📤 导出STL/OBJ格式
• 🔧 自定义工作区大小
• 📱 移动端支持
• 🌍 在线分享和协作功能