G-Code 3D 可视化动画器（GCode Web Simulator）

项目目标

开发一个基于 Web 的工具，用于加载并解析 G-code 文件，通过 Three.js 渲染其路径并动态模拟打印/雕刻头的运动，支持交互控制与信息展示，帮助用户更直观地理解打印路径。

技术选型

模块	技术
前端框架	Vue3 + TypeScript + Vite
可视化引擎	Three.js + drei + react-three-fiber
状态管理	Pinia
动画控制	GSAP
文件处理	StreamSaver.js
UI框架	Naive UI

项目任务分解

项目初始化

• 初始化 Vue3 + Vite 项目 (4.24)
• 配置项目结构和依赖 (4.24)
• 设置版本控制和基本开发环境 (4.24)

Three.js 场景创建

• 引入 Three.js 库 (4.24)
• 创建基础 3D 场景，包括摄像机、灯光和坐标轴 (4.24)
• 设置场景渲染循环 (4.24)

UI 框架搭建

• 创建基本的 UI 布局，包括侧边栏和文件上传按钮 (4.24)
• 集成 UI 库（如 naive-ui 或 element-plus） (4.25)
• 添加 G-code 编辑框，支持直接输入和编辑 G-code 内容 (4.25)

G-code 文件解析

• 创建文件上传功能，支持 .gcode 文件 (4.26)
• 支持从编辑框直接输入 G-code 内容 (4.26)
• 解析 G-code 文件/内容，将其按行拆分为指令数组 (4.28)
• 解析常见指令（如 G0、G1、G2、G3）及其坐标（X/Y/Z/E/F）和圆弧参数（I/J/K/R）(4.28)
• 将指令转换为轨迹点序列 (4.28)

路径可视化

• 使用 Three.js 绘制三维轨迹（THREE.Line 或 LineSegments）(5.1)
• 支持分段显示不同路径（空走 / 打印）(5.1)
• 在起始点加入打印头模型（球体）(5.1)

打印动画模拟

• 实现打印头沿轨迹移动的动画(5.7)
• 添加播放、暂停和进度条控件(5.7)
• 实时显示当前坐标、速度等信息

UI与交互优化

• 添加轨迹颜色控制功能
• 实现 Z 层切换功能（不同高度路径分层）
• 增加设置面板（选择播放速度、是否显示坐标轴等）

部署与打包

• 打包构建生产版
• 部署到 GitHub Pages 或 Vercel
• 编写项目说明文档

如何运行项目

1. 克隆项目到本地。
2. 运行 npm install 安装依赖。
3. 使用 npm run dev 启动开发服务器。
4. 打开浏览器访问 http://localhost:5173 或 http://localhost:5174（如果 5173 端口被占用）查看效果。

贡献指南

欢迎任何形式的贡献！请提交 Pull Request 或报告问题。

许可证

本项目采用 MIT 许可证。