{"id":51417,"url":"https://github.com/zyj1022/awesome-threejs","name":"awesome-threejs","description":"搜集并学习threejs的相关知识总结、Demo、站点、书籍等。","projects_count":70,"last_synced_at":"2026-10-02T16:00:25.825Z","repository":{"id":49385435,"uuid":"142989090","full_name":"zyj1022/awesome-threejs","owner":"zyj1022","description":"搜集并学习threejs的相关知识总结、Demo、站点、书籍等。","archived":false,"fork":false,"pushed_at":"2023-12-15T00:51:47.000Z","size":272510,"stargazers_count":178,"open_issues_count":0,"forks_count":27,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-09-12T18:09:17.748Z","etag":null,"topics":["b4w","demos","threejs","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/zyj1022.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}},"created_at":"2018-07-31T08:58:49.000Z","updated_at":"2026-08-09T07:09:41.000Z","dependencies_parsed_at":"2024-01-14T13:51:23.571Z","dependency_job_id":null,"html_url":"https://github.com/zyj1022/awesome-threejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zyj1022/awesome-threejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyj1022%2Fawesome-threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyj1022%2Fawesome-threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyj1022%2Fawesome-threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyj1022%2Fawesome-threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zyj1022","download_url":"https://codeload.github.com/zyj1022/awesome-threejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zyj1022%2Fawesome-threejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":342542704,"owners_count":37937383,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-08-22T15:14:58.755Z","status":"online","status_checked_at":"2026-10-02T02:00:07.254Z","response_time":104,"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"}},"created_at":"2024-01-14T11:16:20.136Z","updated_at":"2026-10-02T16:00:25.826Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["[Threejs](https://threejs.org)","Shader 相关资料","贴图素材","在线站点","进阶教程","Threejs 相关的库","相关书籍资料","同类库探索"],"sub_categories":["踩坑经验","网上收集资料","在线DEMO"],"readme":"# [Awesome-threejs](https://github.com/zyj1022/awesome-threejs/)\n\n搜集并学习threejs的相关知识总结、Demo、站点、书籍等，欢迎有兴趣的小伙伴一起交流学习。\n\n## [Threejs](https://threejs.org)\n\nthree.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。查看[官方实例](https://threejs.org/examples/)\n\n## 基础入门\n\n### 问-学-记\n\n个人学习过程中的疑问记录及demo演示，小白入门开始教程之Hello Threejs。\n\n- [x] [什么是WebGL?](./docs/what-webgl.md)\n- [x] [开始第一个Hello world](./docs/hello-world.md)\n- [x] [三维空间中观察物体的方法--照相机](./docs/hello-camera.md)\n- [x] [创建各种几何形状](./docs/hello-geometry.md)\n- [x] [光影之谜](./docs/hello-light.md)\n- [x] [给创建的物体赋予材质](./docs/hello-material.md)\n- [x] [让物体动起来](./docs/hello-tween.md)\n- [x] [运动3D物体的性能监测](./docs/hello-stats.md)\n- [x] [加载外部3D模型](./docs/hello-loader.md)\n- [x] [有趣的着色器](./docs/hello-shaders.md)\n- [x] [创建自己的全景图](./docs/hello-cubemap.md)\n- [x] [obj、mtl文件格式详解](./docs/hello-obj-mtl.md)\n\n## 进阶教程\n\n- [x] [理解光源的应用](./docs/hello-light-pro.md)\n- [ ] 粒子效果点云\n- [ ] 使用二元操作组合网格\n- [ ] 几何体的合并与组合\n- [ ] 摄像机控制器\n- [ ] 变形动画与骨骼动画\n- [ ] 场景内物体的物理效果\n- [ ] 自定义着色器与后期处理\n- [x] [OpenGL GLSL 基础语法和函数](./docs/glsl/glsl-syntax.md)\n- [x] [GLSL 中文手册](./docs/glsl/glsl-cookbook.md)\n\n### 踩坑经验\n\n分享记录遇到的坑及解决方案\n\n\u003e 以下经验来自[快乐小球球](https://zhuanlan.zhihu.com/p/25483816)\n\n- 图片尺寸必须以2的n次方\u003c=1024，如果图片不是2的整数倍数，引擎会自动压缩到2的整数倍数，在chrome控制台中会出提示，粗看没事，但在iphone6Plus下会卡到微信闪退.\n- 用webpack打包模型文件，用各种加载器中的 prase 直接解析即可。模型在 webpack 中以 raw 加载\n\n  ```\n  module: {\n    loaders: [\n      {test: /\\.dae$/, loader: 'raw'},\n      ...\n    ]\n  }\n  ```\n\n## Shader 相关资料\n\n- [LearnOpenGL-CN](https://learnopengl-cn.readthedocs.io/zh/latest/)\n- [The Book of Shaders](https://thebookofshaders.com/?lan=ch)--一本关于 Fragment Shaders（片段着色器）的入门指南\n- [The Book of Shaders Editor](http://editor.thebookofshaders.com)- Shaders 在线编辑器\n- [Inigo Quilez](http://www.iquilezles.org/www/index.htm) - 有关计算机图形学、着色器的博客代码示例\n- [Introducing Shaders](https://openframeworks.cc/ofBook/chapters/shaders.html)\n- [pixelshaders](http://pixelshaders.com/) - 基础代码示例\n\n### shader 效果\n\n用如上 **[Shaders 在线编辑器](http://editor.thebookofshaders.com)** 可以查看效果 [这里查看效果代码](./docs/glsl/glsl_shaders.md)\n\n### 网上收集资料\n\n- [Three.js Fundamentals starting lesson](https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html) 官网推荐入门教程\n- [图解WebGL\u0026Three.js工作原理](https://www.cnblogs.com/wanbo/p/6754066.html)\n- [three.js editor使用视频教程](https://www.youtube.com/watch?v=rqn-KPnh3hM)\n- [youtube入门视频教程](https://www.youtube.com/watch?v=biZgx45Mzqo\u0026list=PL08jItIqOb2qyMOhtEUoLh100KpccQiRf\u0026index=2)\n- [Three.js 中文文档](http://techbrood.com/threejs/docs/)\n- [ThreeJS快速入门](https://zhuanlan.zhihu.com/p/23272116)\n- [learningthreejs-系列博客](http://learningthreejs.com)\n- [webgl 入门教程](https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene)\n- [使用 D3 + webgl 制作地球仪](http://www.delimited.io/blog/2015/5/16/interactive-webgl-globes-with-threejs-and-d3)\n- [使用 header-tracker 和 webRTC](http://learningthreejs.com/blog/2013/03/12/move-a-cube-with-your-head/)\n- [Intro to WebGL with Three.js](http://davidscottlyons.com/threejs/presentations/frontporch14/#slide-0)\n- [Google+ 关于 threejs 的文章发布](https://plus.google.com/+ThreejsOrg)\n\n## Threejs 相关的库\n\n- [tween lite](https://greensock.com/)\n- [dat.gui: 一个轻量级的可视化库供开发者调试变量使用](https://github.com/dataarts/dat.gui)\n- [csg.js: 封装了几何体合并、取交集、取非交集的方法](http://evanw.github.io/csg.js/docs/)\n- [headtraker](https://github.com/auduno/headtrackr)\n- [html_gl](https://github.com/PixelsCommander/HTML-GL)\n- [threex](http://www.threejsgames.com/extensions/)\n- [ar.js](https://github.com/then/promise)\n\n## 贴图素材\n\n- [3dwarehouse](https://3dwarehouse.sketchup.com)\n- [行星素材](http://planetpixelemporium.com/earth.html)\n- [Clara.io 3D素材](https://clara.io/library)\n- [Shadertoy 着色器](https://www.shadertoy.com)\n- [各种着色器 demo 文章](http://www.iquilezles.org/www/index.htm)\n\n## 在线站点\n\n- [marpi.pl](https://demo.marpi.pl) - 很多牛X的Demo\n- [Altered Qualia](http://alteredqualia.com/) - 也是很棒的Demo\n- [CESIUM 3D 地球](http://cesiumjs.org/index.html)\n- [minecraft-threejs-clone](https://dgreenheck.github.io/minecraft-threejs-clone/)-我的世界threejs版，还有另一个 threejs-procedural-planets\n\n### 在线DEMO\n\n- [三种方法创建3D粒子效果](https://varun.ca/three-js-particles)\n- [three-seed](https://github.com/edwinwebb/three-seed/) - three.js starter project with ES6 and Webpack\n- [The Aviator](https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/) - the-aviator-animating-basic-3d-scene-threejs\n- [Infinite Tubes](https://tympanus.net/codrops/2017/05/09/infinite-tubes-with-three-js/)\n- [Decorative WebGL Backgrounds](https://tympanus.net/codrops/2017/11/28/decorative-webgl-backgrounds/)\n- [egraether - Demos](http://egraether.com)\n- [David Lyons - 3D Artist](http://davidscottlyons.com)\n- [83个含注释Demo](https://stemkoski.github.io/Three.js/)\n- [workshop](http://workshop.chromeexperiments.com)\n- [Three Bird](http://codepen.io/Yakudoo/pen/LVyJXw?editors=0010)\n- [Crystals](http://codepen.io/aglosson/pen/rVyRGm?editors=0010)\n- [three.js-editor](https://threejs.org/editor/)\n- [星空](http://charliehoey.com/threejs-demos/our-galactic-neighborhood.html)\n- [3D投影](https://threejs.org/examples/#webgl_materials_cubemap)\n- [voxelpainter](https://threejs.org/examples/webgl_interactive_voxelpainter.html)\n- [tunnel-effect](http://learningthreejs.com/blog/2012/01/11/tunnel-effect/)\n- [Altered earth](http://alteredqualia.com/xg/examples/earth_bathymetry.html)\n\n## 相关书籍资料\n\n收集整理学习资料。\n\n- [《threejs-intro》](http://davidscottlyons.com/threejs-intro/#slide-1)----很棒的入门示例\n- 《WebGL编程指南》\n- 《Three.js开发指南》-- [在线Demo案例](http://www.skyliu.top/three-js/)\n- [《Three.js入门指南》](http://www.ituring.com.cn/book/1272)--[书例代码](http://zhangwenli.com/ThreeExample.js/)\n- [Three.js入门教程](http://www.cnblogs.com/yiyezhai/category/447410.html) -- 这是对国外一份教程的翻译，一共六篇文章。讲解不多，更多的是展示各个基本功能怎么用。更适合有一些图形基础的同学\n\n## 同类库探索\n\n![b4w](./docs/images/b4w.png) ![p5.js](./docs/images/p5.png)\n\n- [blend4web](https://github.com/TriumphLLC/Blend4Web)\n\n  - [Demo案例 - 仿机械革命源计划-私人定制](http://zyj1022.github.io/demos/blend4web/index.html)\n\n- [P5.js](https://p5js.org/zh-Hans/) - [基础教程](./docs/hello-p5.md)\n\n  - [p5.js Web Editor](https://editor.p5js.org) - p5在线编辑器\n  - [OpenProcessing](https://www.openprocessing.org/) - 各种 demo\n  - wangyasai-[亚赛大人](https://github.com/wangyasai),很多好玩的效果，👍.\n\n    - [Speed-Line](https://wangyasai.github.io/Speed-Line/) - 漫画必备超燃速度线\n    - [Play-a-ball](https://wangyasai.github.io/Play-a-ball/) - 抽象球体生成器\n    - [Awesome Masoic](https://wangyasai.github.io/Awesome-Masoic) - 动态马赛克背景生成器\n    - [Perlin Noise](https://wangyasai.github.io/Perlin-Noise/) - 等高线神器\n    - [Stars-Emmision](https://wangyasai.github.io/Stars-Emmision/) - 万箭齐发毫发无伤背景生成器\n    - [Particles-Emission](https://wangyasai.github.io/Particles-Emission/) - 粒子循环运动神器\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/zyj1022%2Fawesome-threejs/projects"}