3D 打印 G-Code 查看器 (3D Printing G-Code Viewer)

一个基于 React、Three.js 和 TypeScript 构建的高性能 3D G-code 查看器。该应用程序允许用户在交互式 3D 环境中可视化 3D 打印的 G-code 文件，检查层级结构并分析打印路径。

功能特性

• 3D 可视化：使用 Three.js 在全交互式 3D 场景中渲染 G-code 路径。
• 多种渲染模式：
  • 线条模式 (Lines)：传统的基于线条的渲染，用于精确的路径可视化。
  • 实例化网格模式 (InstancedMesh)：针对复杂模型和更好性能的优化渲染方式。
• 层级分析：根据 Z 轴高度自动将 G-code 解析为层，支持逐层检查。
• 交互式控制：
  • 支持旋转、缩放和平移，可从任意角度检查模型。
  • 专为切片软件/打印机视图定制的相机控制。
• 实时解析：支持标准 G0/G1 指令的客户端 G-code 解析引擎。
• 构建板可视化：包含带有坐标轴的构建板（热床）可视化展示。

技术栈

• 前端框架: React 19
• 构建工具: Vite
• 编程语言: TypeScript
• 3D 引擎: Three.js 搭配 @react-three/fiber & @react-three/drei
• 状态管理: Zustand
• UI 组件库: Material UI (MUI)

项目结构

• src/canvas: 包含所有 3D 相关组件：
  • Scene.tsx: 主 3D 场景设置。
  • GCodeViewer/: G-code 解析和渲染逻辑。
  • Plate/: 构建板和坐标轴可视化。
• src/dom: UI 覆盖层组件（设置、控制面板）。
• src/stores: 用于全局状态管理的 Zustand store（G-code 数据、渲染设置、相机控制）。
• src/utils: 工具函数，包括自定义 G-code 解析器 (gcodeParser.ts)。
• public/gcode: 示例 G-code 文件目录（包含 benchy.gcode）。

使用说明

• 默认视图：启动后，应用程序会加载示例 benchy.gcode 文件以展示功能。
• 导航操作：
  • 鼠标右键 / 中键：平移视图。
  • 滚轮：缩放视图。
  • 鼠标左键：（根据选择的工具自定义行为，默认旋转）。
• 自定义设置：使用 UI 覆盖层在渲染模式（线条/实例化）之间切换并调整可视化设置。