{"id":28199636,"url":"https://github.com/lengxien/ai-three3dmodel","last_synced_at":"2026-04-29T15:37:34.662Z","repository":{"id":263564444,"uuid":"890215819","full_name":"LenGxien/AI-Three3dModel","owner":"LenGxien","description":"threejs 3D编辑器","archived":false,"fork":false,"pushed_at":"2025-01-20T02:40:46.000Z","size":1545,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T14:17:41.574Z","etag":null,"topics":["3d","3d-editor","3d-models","threejs"],"latest_commit_sha":null,"homepage":"https://lx-three-3d-editor.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LenGxien.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-11-18T07:34:51.000Z","updated_at":"2025-02-08T09:09:09.000Z","dependencies_parsed_at":"2024-11-19T08:40:45.093Z","dependency_job_id":"f6b2d5a1-b0af-46d7-a66f-a48c28bce37e","html_url":"https://github.com/LenGxien/AI-Three3dModel","commit_stats":null,"previous_names":["guixianleng/ai-three3dmodel","lengxien/ai-three3dmodel"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2FAI-Three3dModel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2FAI-Three3dModel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2FAI-Three3dModel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LenGxien%2FAI-Three3dModel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LenGxien","download_url":"https://codeload.github.com/LenGxien/AI-Three3dModel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254592362,"owners_count":22097015,"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","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":["3d","3d-editor","3d-models","threejs"],"created_at":"2025-05-16T19:12:36.842Z","updated_at":"2026-04-29T15:37:34.629Z","avatar_url":"https://github.com/LenGxien.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three-3D-editor\n\n## 项目结构\n\n```bash\npackages/\n├── components/               # 组件目录\n│   └── three-loader/        # Three.js 加载器组件\n│       ├── src/\n│       │   ├── components/  # 子组件\n│       │   │   ├── controls/       # 控制面板组件\n│       │   │   │   ├── ModelControls.vue    # 模型控制主组件\n│       │   │   │   ├── MaterialControls.vue # 材质控制组件\n│       │   │   │   └── ...\n│       │   ├── config/     # 配置文件\n│       │   │   ├── eventKeys.ts   # 事件配置\n│       │   │   └── ...\n│       │   ├── hooks/      # 自定义钩子\n│       │   │   ├── useThreeScene.ts     # 场景管理\n│       │   │   ├── useThreeModel.ts     # 模型管理\n│       │   │   ├── useThreeMaterials.ts # 材质管理\n│       │   │   ├── useThreeControls.ts  # 控制器管理\n│       │   │   └── ...\n│       │   ├── types/      # 类型定义\n│       │   │   ├── materials.ts    # 材质相关类型\n│       │   │   ├── controls.ts     # 控制器相关类型\n│       │   │   └── ...\n│       │   └── index.vue   # 主组件\n└── utils/                   # 工具函数\n    └── ...\n\n## 技术栈\n\n- **前端框架**: Vue 3 + TypeScript\n- **3D 引擎**: Three.js r150+\n- **构建工具**: Vite\n- **UI 框架**: Element Plus\n- **样式方案**: UnoCSS\n- **状态管理**: Vue Composition API\n\n## 核心功能模块\n\n### 1. 场景管理 (useThreeScene)\n```typescript\nconst {\n  scene,          // Three.js 场景实例\n  camera,         // 相机实例\n  renderer,       // 渲染器实例\n  controls,       // 控制器实例\n  initScene,      // 初始化场景\n  updateScene,    // 更新场景\n  disposeScene    // 销毁场景\n} = useThreeScene()\n```\n\n### 2. 模型管理 (useThreeModel)\n```typescript\nconst {\n  model,           // 当前模型实例\n  loadModel,       // 加载模型\n  updateModel,     // 更新模型\n  disposeModel,    // 销毁模型\n  modelControls    // 模型控制参数\n} = useThreeModel()\n```\n\n### 3. 材质管理 (useThreeMaterials)\n```typescript\nconst {\n  materials,       // 材质映射表\n  materialList,    // 材质列表\n  currentMaterial, // 当前选中材质\n  selectMaterial,  // 选择材质\n  updateMaterialProperty,  // 更新材质属性\n  convertMaterialType     // 转换材质类型\n} = useThreeMaterials()\n```\n\n### 4. 控制器管理 (useThreeControls)\n```typescript\nconst {\n  initControls,    // 初始化控制器\n  updateControls,  // 更新控制器\n  resetControls    // 重置控制器\n} = useThreeControls()\n```\n\n## 事件系统\n\n### 场景事件\n```typescript\ninterface SceneEvents {\n  // 更新材质\n  updateMaterial: (options: IMaterialUpdateOptions) =\u003e void\n  // 更新控制器\n  updateControls: (options: Partial\u003cIControlsOptions\u003e) =\u003e void\n  // 更新灯光\n  updateLight: (options: Partial\u003cILightOptions\u003e) =\u003e void\n  // 更新地面\n  updateFloor: (options: Partial\u003cIFloorOptions\u003e) =\u003e void\n}\n```\n\n## 组件通信\n\n### 1. Props 传递\n```typescript\n// ModelControls.vue Props\ninterface Props {\n  modelControls: IModelControls       // 模型控制参数\n  materialList: IMaterialOptions[]    // 材质列表\n  updateMaterial: (options: IMaterialUpdateOptions) =\u003e void\n}\n```\n\n### 2. 事件发送\n```typescript\n// 材质更新事件\nemit('update-material', {\n  name: materialName,\n  property: 'color',\n  value: 0xff0000\n})\n```\n\n## 开发指南\n\n### 1. 环境准备\n```bash\n# 安装依赖\npnpm install\n\n# 启动开发服务器\npnpm dev\n```\n\n### 2. 新增材质类型\n1. 在 `types/materials.ts` 中添加新材质类型\n2. 在 `useThreeMaterials.ts` 中实现材质创建逻辑\n3. 在 `MaterialControls.vue` 中添加对应的 UI 控制项\n\n### 3. 添加新的控制功能\n1. 在相应的类型定义文件中添加新的配置项\n2. 在对应的 hook 中实现功能逻辑\n3. 在控制面板组件中添加 UI 控制项\n4. 在事件系统中添加相应的处理方法\n\n## 性能优化\n\n### 1. 材质管理\n- 使用材质缓存避免重复创建\n- 及时释放未使用的材质和纹理\n- 批量更新材质属性\n\n### 2. 渲染优化\n- 使用 `requestAnimationFrame` 进行渲染\n- 仅在需要时更新场景\n- 优化模型几何体\n\n### 3. 内存管理\n- 正确调用 `dispose()` 方法释放资源\n- 使用 `WeakMap` 存储临时数据\n- 及时清理不再使用的引用\n\n## 调试与测试\n\n### 1. 开发调试\n- 使用 Vue DevTools 调试组件\n- 使用 Three.js Inspector 调试场景\n- 控制台日志输出关键信息\n\n### 2. 性能监控\n- 使用 Stats.js 监控帧率\n- 监控内存使用情况\n- 跟踪材质和纹理数量\n\n## 部署说明\n\n### 1. 构建\n```bash\n# 构建生产版本\npnpm build\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flengxien%2Fai-three3dmodel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flengxien%2Fai-three3dmodel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flengxien%2Fai-three3dmodel/lists"}