Awesome-threejs
搜集並學習threejs的相關知識總結、Demo、 網站、書籍等,歡迎有興趣的小夥伴一起交流學習。
three.js是以webgl為基礎的庫,封裝了一些3D渲染需求中重要的工具方法與渲染循環。WebGL門檻相對較高,Three.js對WebGL提供的介面進行了非常好的封裝,簡化了很多細節,大大降低了學習成本。查看官方實例
基礎入門
問-學-記
個人學習過程中的疑問記錄及demoDemo,小白入門開始教程之Hello Threejs。
進階教程
踩坑經驗
分享記錄遇到的坑及解決方案
以下經驗來自快樂小球球
圖片尺寸必須以2的n次方<=1024,如果圖片不是2的整數倍數,引擎會自動壓縮到2的整數倍數,在chrome控制台中會出提示,粗看沒事,但在iphone6Plus下會卡到微信閃退.
用webpack打包模型文件,用各種載入器中的 prase 直接解析即可。模型在 webpack 中以 raw 載入
Shader 相關資料
The Book of Shaders--一本關於 Fragment Shaders(片段著色器)的入門指南
The Book of Shaders Editor- Shaders 在線編輯器
Inigo Quilez - 有關電腦圖形學、著色器的部落格程式碼示例
pixelshaders - 基礎程式碼示例
shader 效果
用如上 Shaders 在線編輯器 可以查看效果 這裡查看效果程式碼
網上收集資料
Threejs 相關的庫
貼圖素材
在線 網站
marpi.pl - 很多牛X的Demo
Altered Qualia - 也是很棒的Demo
在線DEMO
three-seed - three.js starter project with ES6 and Webpack
The Aviator - the-aviator-animating-basic-3d-scene-threejs
相關書籍資料
收集整理學習資料。
《threejs-intro》----很棒的入門示例
《WebGL編程指南》
《Three.js開發指南》-- 在線Demo案例
Three.js入門教程 -- 這是對國外一份教程的翻譯,一共六篇文章。講解不多,更多的是展示各個基本功能怎麼用。更適合有一些圖形基礎的同學
同類庫探索
p5.js Web Editor - p5在線編輯器
OpenProcessing - 各種 demo
wangyasai-亞賽大人,很多好玩的效果,👍.
Speed-Line - 漫畫必備超燃速度線
Play-a-ball - 抽象球體生成器
Awesome Masoic - 動態馬賽克背景生成器
Perlin Noise - 等高線神器
Stars-Emmision - 萬箭齊發毫髮無傷背景生成器
Particles-Emission - 粒子循環運動神器
Last updated