{"id":30558267,"url":"https://github.com/fellow99/three-editor-by-ai","last_synced_at":"2026-05-18T09:34:10.388Z","repository":{"id":308303151,"uuid":"1032238764","full_name":"fellow99/three-editor-by-ai","owner":"fellow99","description":"A threejs 3D editor written by AI","archived":false,"fork":false,"pushed_at":"2025-08-23T13:18:53.000Z","size":6953,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-24T04:14:52.889Z","etag":null,"topics":["ai-coding","threejs","threejs-editor"],"latest_commit_sha":null,"homepage":"https://github.com/fellow99/three-editor-by-ai","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fellow99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-05T03:01:56.000Z","updated_at":"2025-08-23T13:18:56.000Z","dependencies_parsed_at":"2025-08-24T01:08:43.456Z","dependency_job_id":"0b495c6b-7e54-42f9-8188-e8f1a3a0301b","html_url":"https://github.com/fellow99/three-editor-by-ai","commit_stats":null,"previous_names":["fellow99/three-editor-by-ai"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fellow99/three-editor-by-ai","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellow99%2Fthree-editor-by-ai","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellow99%2Fthree-editor-by-ai/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellow99%2Fthree-editor-by-ai/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellow99%2Fthree-editor-by-ai/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fellow99","download_url":"https://codeload.github.com/fellow99/three-editor-by-ai/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fellow99%2Fthree-editor-by-ai/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272466618,"owners_count":24939441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-coding","threejs","threejs-editor"],"created_at":"2025-08-28T08:03:24.858Z","updated_at":"2026-05-18T09:34:10.382Z","avatar_url":"https://github.com/fellow99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D 场景编辑器 (Three Editor by AI)\n\n一个基于 Vue 3 + Three.js 的现代化3D场景编辑器，支持三维模型的拖放、调整和属性配置。\n本工程完全使用AI自行编写代码。\n\n## 🎨 截图\n![截图1](public/images/screenshot01.png)\n\n## ✅ 主要功能\n\n- 3D场景渲染和管理\n- 多种基础与扩展几何体创建\n- 完整的对象变换系统（移动、旋转、缩放）、撤销重做历史记录\n- 对象变换支持Y轴锁定\n- 多格式3D模型和纹理加载与管理（GLTF、OBJ、FBX等）\n- 支持加载3DTiles，基于[3d-tiles-renderer](https://www.npmjs.com/package/3d-tiles-renderer)\n- 拖拽上传、资源管理与资源浏览（支持模型预览和几何体创建）\n- 相机控制与预设视角（OrbitControls、MapControls、FlyControls切换，FlyControls支持基于键盘、鼠标的三维飞行控制）\n- 材质编辑和属性调整（多种材质类型与参数动态配置）\n- 场景序列化、导入导出与完整层级管理\n- 单对象选择和编辑\n- 支持GLTF等模型的动画选择与播放，动画状态可导出与恢复\n- 底部状态栏显示当前视点（相机旋转）\n- 虚拟文件系统，对接后端文件库\n- 文件面板拖拽模型文件到场景直接加载\n- 支持从虚拟文件系统面板拖拽模型文件到场景直接加载\n- 拖拽添加对象时，自动放置到当前视点位置\n- 后处理机制（集成Three.js EffectComposer，支持Bloom、FXAA等多种后处理效果链路，统一API动态管理Pass）\n\n## 🚀 技术栈\n\n- **前端框架**: Vue 3 + Vite\n- **3D引擎**: Three.js\n- **构建工具**: Vite\n- **样式**: Sass\n- **网络请求**: Fetch API\n- **工具库**: \n  - Element Plus - 主流UI组件库\n  - Lodash - 实用工具函数库\n  - Day.js - 轻量级日期时间库\n  - mitt - 事件机制\n  - [three-viewport-gizmo](https://www.npmjs.com/package/three-viewport-gizmo) - 立方体视角控件库\n  - [3d-tiles-renderer](https://www.npmjs.com/package/3d-tiles-renderer) - 3dtiles加载库\n  - [stats-gl](https://www.npmjs.com/package/stats-gl) - 性能监控\n\n## 📁 项目结构\n\n```\n/\n├── src/\n│   ├── components/                           # Vue 组件\n│   │   ├── editor/                           # 编辑器 UI 组件\n│   │   │   ├── AssetBrowser.vue              # 资源浏览器\n│   │   │   ├── EditorFooter.vue              # 编辑器底部状态栏\n│   │   │   ├── Inspector.vue                 # 对象检查器\n│   │   │   ├── MultiSelectPanel.vue          # 多对象批量操作面板\n│   │   │   ├── PrimitiveBrowser.vue          # 基础几何体与灯光浏览组件\n│   │   │   ├── PropertyPanel.vue             # 属性面板\n│   │   │   ├── ResourcePanel.vue             # 资源面板\n│   │   │   ├── Toolbar.vue                   # 工具栏\n│   │   │   ├── VfsFileBrowser.vue            # 虚拟文件系统面板\n│   │   ├── property/                         # 各种属性编辑组件\n│   │   │   ├── AnimationPropertyPane.vue     # 动画属性面板（动画选择与播放）\n│   │   │   ├── BasePropertyPane.vue          # 对象基础属性编辑面板\n│   │   │   ├── ScenePropertyPane.vue         # 场景属性编辑面板\n│   │   │   ├── UserDataPropertyPane.vue      # userData属性编辑面板\n│   │   │   ├── SceneUserDataPropertyPane.vue # 场景的userData属性编辑面板\n│   │   │   ├── TransformPropertyPane.vue     # 变换属性面板（位置、旋转、缩放）\n│   │   │   ├── TexturePropertyPane.vue       # 纹理编辑面板\n│   │   │   ├── MaterialPropertyPane.vue      # 材质编辑面板\n│   │   │   ├── PrimitivePropertyPane-*.vue   # 各种Primitive的专属属性编辑面板\n│   │   │   ├── LightPropertyPane-*.vue       # 各种灯光的专属属性面板\n│   │   ├── dialog/                           # 各类对话框组件\n│   │   │   ├── EditorConfigDialog.vue        # 编辑器配置对话框\n│   │   │   ├── VfsFileChooserDialog.vue      # 虚拟文件系统文件选择对话框\n│   │   │   ├── VfsFileSaverDialog.vue        # 文件保存对话框（基于虚拟文件系统）\n│   │   │   ├── VfsFolderChooserDialog.vue    # 目录选择对话框（基于虚拟文件系统）\n│   │   │   ├── VfsMaterialChooserDialog.vue  # 材质选择对话框（基于虚拟文件系统）\n│   │   │   ├── UserDataPopup.vue             # UserData 编辑弹出框\n│   │   ├── scene/                            # 3D 场景组件\n│   │   │   ├── CubeViewportControls.vue      # 立方体视角控件\n│   │   │   ├── InteractionHints.vue          # 操作提示组件，支持切换控制器\n│   │   │   ├── SceneViewer.vue               # 主场景视图，支持拖拽添加对象到当前视点位置\n│   │   │   ├── StatHints.vue                 # 性能监控面板\n│   │   │   ├── ViewportControls.vue          # 视图控制面板组件\n│   ├── composables/           # Vue Composition API 可组合函数\n│   │   ├── useAssetsManager.js        # 资源管理组合式函数，提供资源加载和管理相关的响应式状态和操作方法\n│   │   ├── useAxesLockState.js        # Y轴锁定状态组合式函数\n│   │   ├── useCameraPosState.js       # 相机状态组合式函数\n│   │   ├── useControls.js             # 控制器状态组合式函数\n│   │   ├── useEditorConfig.js         # 编辑器配置组合式函数\n│   │   ├── useEventBus.js             # 事件总线组合式函数\n│   │   ├── useHelpers.js              # 辅助对象组合式函数\n│   │   ├── useInputManager.js         # 输入管理组合式函数\n│   │   ├── useInspectorHandler.js     # 检查器处理组合式函数\n│   │   ├── useMaterial.js             # 材质管理组合式函数\n│   │   ├── useNavigationsState.js     # 漫游列表状态组合式函数\n│   │   ├── useObjectManager.js        # 对象管理组合式函数\n│   │   ├── useObjectSelection.js      # 对象选择与变换控制管理组合式函数，提供对象选择、TransformControls、选中对象辅助显示等功能\n│   │   ├── useStats.js                # 场景统计信息组合式函数\n│   │   ├── useThreeViewer.js          # Three.js 视图管理组合式函数\n│   │   ├── useTransform.js            # 变换操作组合式函数，提供对象变换相关的响应式状态和操作方法\n│   ├── core/                  # 核心 Three.js 逻辑\n│   │   ├── AssetLoader.js     # 资源加载器\n│   │   ├── InputManager.js    # 输入管理器\n│   │   ├── ObjectManager.js   # 对象管理器\n│   │   ├── ThreeViewer.js    # 场景管理器\n│   ├── services/              # 数据请求和外部接口\n│   │   ├── static-drive-api.js# 静态文件系统封装\n│   │   ├── vfs-server-api.js  # 虚拟文件系统封装\n│   │   ├── vfs-service.js     # 虚拟文件系统服务\n│   ├── controls/             # 控制器\n│   │   ├── FlyControls.js    # 飞行控制器，支持基于键盘、鼠标的三维飞行\n│   ├── utils/                # 工具函数\n│   │   ├── mathUtils.js      # 数学工具\n│   │   ├── geometryUtils.js  # 几何工具\n│   │   ├── fileUtils.js      # 文件处理工具\n│   ├── constants/            # 常量定义\n│   │   ├── PRIMITIVES.json   # 预定义几何体与灯光类型数据\n│   │   ├── DEFAULT_CAMERA_POS.json   # 预定义相机位置数据\n│   ├── App.vue               # 根组件（仅负责引入Editor.vue）\n│   ├── Editor.vue            # 主编辑器组件（包含全部业务与UI）\n│   ├── main.js               # 应用入口\n│   ├── main-func.js          # 应用入口文件相关的功能函数\n│   ├── style.scss            # 全局样式\n├── public/                   # 存放无需构建的静态资源\n│   ├── images/               # 图片资源目录\n│   ├── vfs/                  # 静态资源目录（虚拟文件系统，.folder.json文件用于描述目录和文件信息）\n├── script/                   # 脚本\n│   ├── package.json          # 脚本子项目配置\n│   ├── generate-vfs.js       # 脚本：生成虚拟文件系统的元数据，用于编辑器的文件浏览器\n│   ├── vfs-server.js         # 脚本：虚拟文件系统后端服务，支持多 drive 配置（读取vfs-server.json）\n├── index.html                # HTML 模板\n├── package.json              # 项目配置\n├── vite.config.js            # Vite 配置\n├── README.md                 # 项目说明\n```\n\n## 🏗️ 架构设计\n\n### 组件层次\n\n1. **主编辑器组件** (`Editor.vue`): 负责所有业务逻辑和UI的集成\n2. **UI 层** (`components/editor/`, `components/dialog/`): 负责用户界面和交互\n3. **渲染层** (`components/scene/`): 处理三维场景渲染和显示\n4. **逻辑层** (`composables/`): 业务逻辑和状态管理\n5. **引擎层** (`core/`): 三维引擎核心逻辑（对three.js的封装）\n5. **服务层** (`services/`): 数据请求和外部接口\n6. **工具层** (`utils/`): 通用工具函数\n\n### 技术特点\n\n- **响应式状态**: 使用 Vue 3 Composition API 管理应用状态\n- **模块化设计**: 清晰的代码组织和职责分离\n- **类型安全**: 良好的代码结构支持 TypeScript 迁移\n- **性能优化**: 合理的组件懒加载和渲染优化\n\n## 📋 开发规范\n\n- 遵循 Vue 3 组合式 API 最佳实践\n- 使用 ES6+ 语法特性\n- 组件命名采用 PascalCase\n- 文件和目录命名采用 camelCase\n- Git 提交信息格式: `feat: 功能描述`\n\n## 重要逻辑\n\n- vite.config.js中，配置vite-plugin-static-copy，把几个js库的复制到目标路径：\n  - 如需加载Draco压缩的glTF模型，请将node_modules/three/examples/jsm/libs/draco/目录中的文件复制到 /draco/ 目录下。\n  - 如需加载KTX2纹理，请将node_modules/three/examples/jsm/libs/basis目录中的文件放入 /basis/ 目录下。\n  - 如需加载Meshopt压缩的glTF模型，请将node_modules/three/examples/jsm/libs/meshopt_decoder.module.js文件放入 public/meshopt/ 目录下。\n- ThreeViewer.js中：\n  - loadScene()方法加载场景时，灯光和对象会完整恢复userData到Three.js对象，包括自定义属性、动画索引等，确保序列化与反序列化一致。\n  - findObjectsByUserData(key, value) 方法：支持多层key（如xxx.yyy），递归读取对象userData的嵌套属性值，并与value对比，返回所有匹配对象数组。\n  - 运行时创建的动画相关对象（如_mixer、_activeAction等）不再挂载到userData，而是直接挂在主对象上（如obj._mixer、obj._activeAction），所有运行时临时对象均采用此设计，避免序列化污染，提升运行时管理效率。\n- ObjectManager.js中：\n  - 导出对象数据时，仅保留可序列化字段（如animationIndex），所有运行时对象（如_mixer、_activeAction等）均直接挂主对象，不再出现在userData中。\n  - createPrimitive(type, options) 只负责创建对象，不自动添加到管理器（不调用addObject），需在外部调用addObject方法完成对象注册；\n  - 新增 getUnlockedObjects() 方法，支持获取所有未被锁定（userData.locked !== true）的对象；\n  - getIntersectedObjects() 和 getIntersectedFirstObject() 仅返回未锁定对象；\n  - 变换后分发object-transform-updated事件。\n- useObjectSelection.js中：\n  - 支持多选，selectedObjects 中每个对象对应一个辅助对象 helper，统一由 currentHelpers 管理。\n  - 使用ObjectManager.getIntersectedFirstObject(raycaster)高效获取第一个相交对象。\n  - 内部定义了 `selectionStore`（响应式对象）：\n    - 用于存储选中对象的临时材质信息，key 为对象 id。\n    - selectionStore 生命周期与 useObjectSelection 组合式函数一致，自动随页面刷新或状态重置而清空。\n  - TransformControls与选中对象辅助功能已迁移至useObjectSelection.js统一管理，ThreeViewer.js仅负责场景本身，SceneViewer.vue仅负责初始化调用。\n  - TransformControls拖拽时会自动禁用OrbitControls，避免拖拽时镜头跟随问题，并在拖拽开始/结束时自动调用 useTransform 的 startTransform/endTransform，支持撤销/重做历史记录。\n- FlyControls.js中，已支持基于键盘的三维飞行控制（WASD/QE/方向键等），核心逻辑参考 three/examples/jsm/controls/OrbitControls.js、three/examples/jsm/controls/FlyControls.js 实现，支持速度、旋转、拖拽等多种操作。空格键与R键逻辑一致，均可向上飞行。\n- useAssetsManager.js 中：\n  - 资源加载函数（如 loadModel、loadTexture）已实现缓存机制：若 assetLibrary 中已存在同名且大小一致的资源，则直接返回缓存，避免重复加载和内存浪费。\n- 所有资源（基础几何体、模型、资源）添加方式已统一为拖拽，点击添加功能已移除。\n- 对象动画：GLTF等模型加载后自动挂载animations，属性面板支持动画下拉选择并记录到userData.animationIndex，ThreeViewer.js统一驱动所有对象动画，ObjectManager.js导出/导入时自动保存与恢复动画索引，支持动画状态完整序列化。\n- 本项目核心管理器（ThreeViewer、ObjectManager、InputManager、AssetLoader）均集成了 [mitt](https://github.com/developit/mitt) 事件机制，实现模块间的解耦通信。  \n\n## 💯 AI\n\n- 本工程基本使用AI自行编写代码；\n- 开发环境：VSCode + Cline + GitHub Copilot + Claude 4 / GPT-4.1\n- .clinerules目录：存储AI规则\n- .clinetask目录：存储历史对话\n- 【20250808】使用Claude 4搭建本工程的主体框架，但由于GitHub Copilot Pro版2天内就消耗完（300 Premium requests），后转向使用GPT-4.1实现各项功能。（人工编写代码目前少于2%）\n- 【20250925】阶段性完成编辑器主要功能。（人工编写代码目前少于5%）\n- 【20260106】项目初期使用AI搭建整体框架和主要功能模块，但AI生成的代码质量参差不齐，存在较多bug和不合理设计，后续逐步由人工重构和完善。（重构相关基本都由人工编写）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffellow99%2Fthree-editor-by-ai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffellow99%2Fthree-editor-by-ai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffellow99%2Fthree-editor-by-ai/lists"}