{"id":22631589,"url":"https://github.com/felixzc/three-toolkit","last_synced_at":"2026-04-27T21:31:56.303Z","repository":{"id":237380705,"uuid":"794377173","full_name":"FelixZC/three-toolkit","owner":"FelixZC","description":"Web 3D，从入门到入土","archived":false,"fork":false,"pushed_at":"2025-03-16T14:05:16.000Z","size":94269,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-16T15:22:24.744Z","etag":null,"topics":["3dgraphics","glsl","shader","threejs","webgl"],"latest_commit_sha":null,"homepage":"","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/FelixZC.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-05-01T02:37:44.000Z","updated_at":"2025-03-16T14:05:21.000Z","dependencies_parsed_at":"2024-12-09T02:19:40.142Z","dependency_job_id":null,"html_url":"https://github.com/FelixZC/three-toolkit","commit_stats":null,"previous_names":["felixzc/three-practice","felixzc/three-toolkit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelixZC%2Fthree-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelixZC%2Fthree-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelixZC%2Fthree-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FelixZC%2Fthree-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FelixZC","download_url":"https://codeload.github.com/FelixZC/three-toolkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246136526,"owners_count":20729189,"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":["3dgraphics","glsl","shader","threejs","webgl"],"created_at":"2024-12-09T02:09:47.315Z","updated_at":"2026-04-27T21:31:56.275Z","avatar_url":"https://github.com/FelixZC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# three-toolkit\n\n#### 介绍\nWeb 3D，从入门到入土\n\n#### 示例\n\u003cimg src=\"docs/images/three.png\" alt=\"这是图片的描述0\"\u003e\n\u003cimg src=\"docs/images/three(1).png\" alt=\"这是图片的描述1\"\u003e\n\u003cimg src=\"docs/images/three(2).png\" alt=\"这是图片的描述1\"\u003e\n\u003cimg src=\"docs/images/three(3).png\" alt=\"这是图片的描述1\"\u003e\n\u003cimg src=\"docs/images/three(4).png\" alt=\"这是图片的描述1\"\u003e\n\n#### 功能\n**已实现功能**\n1. **基础组件设置**\n   - **渲染器**：配置 WebGL 渲染器的各项参数，如抗锯齿、sRGB 输出编码、尺寸调整、设备像素比、背景颜色，并添加窗口 resize 事件监听。\n   - **相机**：创建透视相机，设定视角、宽高比、近/远裁剪面距离，设置初始位置和更新投影矩阵。\n   - **灯光**\n     - **环境光**：添加全局环境光。\n     - **定向光**：创建定向光，可调整颜色和强度。\n   - **场景**\n     - **场景创建**：初始化场景对象。\n     - **雾效**：添加雾效，可调节雾的颜色、起始距离和结束距离。\n   - **交互功能**\n     - **OrbitControls**：实现相机的旋转、平移、缩放交互。\n   - **GUI 控制面板**\n     - **光照控制**：调整环境光和定向光的颜色和强度。\n     - **雾效控制**：调整雾的颜色、起始距离和结束距离。\n   - **辅助工具**\n     - **坐标轴辅助线**\n     - **网格辅助**\n     - **平面辅助**\n     - **点光源辅助**\n     - **聚光灯辅助**\n     - **方向光辅助**\n     - **相机辅助**\n\n2. **3D模型加载**\n   - 使用模型加载器（如 `THREE.GLTFLoader`、`THREE.ObjectLoader`）加载多种格式（`.gltf`, `.glb`, `.obj`, `.fbx` 等）的 3D 模型。\n   - 对加载的模型进行位置、旋转、缩放和材质属性的调整。\n\n3. **动画与关键帧**\n   - 定义并播放关键帧动画，利用 `THREE.AnimationMixer` 和 `THREE.KeyframeTrack` 进行控制。\n   - 通过 `THREE.AnimationClip`、`THREE.AnimationAction` 等 API 实现精细的动画管理。\n\n4. **粒子系统**\n   - 使用 `THREE.Points` 或 `THREE.PointsMaterial` 创建粒子系统，实现诸如烟雾、火焰、星空、雪花等效果。\n   - 结合 `THREE.ShaderMaterial` 和自定义着色器实现复杂的粒子效果。\n\n5. **物理模拟**\n   - 集成第三方物理引擎（如 Cannon.js 或 Ammo.js），使用对应的插件（如 `THREE.CannonPhysics` 或 `THREE.AmmoPhysics`）。\n   - 为场景对象添加物理属性，处理碰撞检测、重力、刚体动力学等。\n\n6. **用户交互**\n   - 实现除 OrbitControls 以外的交互方式，如射线拾取（`THREE.Raycaster`）、鼠标拖拽旋转、触摸手势识别（如集成 Hammer.js）。\n   - 根据交互结果更新场景状态、触发特效或动画。\n\n7. **音频与音效**\n   - 添加背景音乐和空间化音效，利用 `THREE.AudioListener`、`THREE.Audio`、`THREE.PositionalAudio`。\n   - 使用 `THREE.AudioLoader` 加载音频文件，并通过 `THREE.AudioAnalyser` 实现音频可视化。\n\n8. **后期处理效果**\n   - 使用 `THREE.EffectComposer` 结合 `THREE.ShaderPass` 实现景深、模糊、色彩校正、噪点、像素化等后期处理效果。\n   - 利用 `THREE.ShaderLib` 提供的着色器或编写自定义 GLSL 着色器实现独特的视觉效果。\n\n9. **多视图与分屏显示**\n   - 创建多个相机、渲染器和 canvas 元素，实现不同视角的并列显示或分屏布局。\n   - 使用 `THREE.StereoCamera` 实现立体视图，或 `THREE.WebGLMultisampleRenderTarget` 提升抗锯齿效果。\n\n**待实现功能**\n\n1. **性能优化**\n   - 使用 `THREE.LOD` 实现细节层次，根据相机距离自动切换模型的低模和高模版本。\n   - 采用 `THREE.BufferGeometry`、`THREE.InstancedBufferGeometry`、`THREE.InstancedMesh` 优化相似对象的渲染。\n   - 利用 `renderer.info` 监控渲染统计信息，据此调整渲染策略以降低 GPU 负荷。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixzc%2Fthree-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelixzc%2Fthree-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelixzc%2Fthree-toolkit/lists"}