Awesome-threejs

搜集並學習threejs的相關知識總結、Demo、 網站、書籍等，歡迎有興趣的小夥伴一起交流學習。

Threejs

three.js是以webgl為基礎的庫，封裝了一些3D渲染需求中重要的工具方法與渲染循環。WebGL門檻相對較高,Three.js對WebGL提供的介面進行了非常好的封裝，簡化了很多細節，大大降低了學習成本。查看官方實例

基礎入門

問-學-記

個人學習過程中的疑問記錄及demoDemo，小白入門開始教程之Hello Threejs。

• 什麼是WebGL?

• 開始第一個Hello world

• 三維空間中觀察物體的方法--照相機

• 創建各種幾何形狀

• 光影之謎

• 給創建的物體賦予材質

• 讓物體動起來

• 運動3D物體的性能監測

• 載入外部3D模型

• 有趣的著色器

• 創建自己的全景圖

• obj、mtl文件格式詳解

進階教程

• 理解光源的應用
• 粒子效果點雲

• 使用二元操作組合網格

• 幾何體的合併與組合

• 攝像機控制器

• 變形動畫與骨骼動畫

• 場景內物體的物理效果

• 自定義著色器與後期處理

• OpenGL GLSL 基礎語法和函數
• GLSL 中文手冊

踩坑經驗

分享記錄遇到的坑及解決方案

以下經驗來自快樂小球球

• 圖片尺寸必須以2的n次方<=1024，如果圖片不是2的整數倍數，引擎會自動壓縮到2的整數倍數，在chrome控制台中會出提示，粗看沒事，但在iphone6Plus下會卡到微信閃退.

• 用webpack打包模型文件，用各種載入器中的 prase 直接解析即可。模型在 webpack 中以 raw 載入

  module: {
    loaders: [
      {test: /\.dae$/, loader: 'raw'},
      ...
    ]
  }

Shader 相關資料

• LearnOpenGL-CN
• The Book of Shaders--一本關於 Fragment Shaders（片段著色器）的入門指南
• The Book of Shaders Editor- Shaders 在線編輯器
• Inigo Quilez - 有關電腦圖形學、著色器的部落格程式碼示例
• Introducing Shaders
• pixelshaders - 基礎程式碼示例

shader 效果

用如上 Shaders 在線編輯器 可以查看效果 這裡查看效果程式碼

網上收集資料

• Three.js Fundamentals starting lesson 官網推薦入門教程
• 圖解WebGL&Three.js工作原理
• three.js editor使用影片教程
• youtube入門影片教程
• Three.js 中文文檔
• ThreeJS快速入門
• learningthreejs-系列部落格
• webgl 入門教程
• 使用 D3 + webgl 製作地球儀
• 使用 header-tracker 和 webRTC
• Intro to WebGL with Three.js
• Google+ 關於 threejs 的文章發布

Threejs 相關的庫

• tween lite
• dat.gui: 一個輕量級的視覺化庫供開發者調試變數使用
• csg.js: 封裝了幾何體合併、取交集、取非交集的方法
• headtraker
• html_gl
• threex
• ar.js

貼圖素材

• 3dwarehouse
• 行星素材
• Clara.io 3D素材
• Shadertoy 著色器
• 各種著色器 demo 文章

在線 網站

• marpi.pl - 很多牛X的Demo
• Altered Qualia - 也是很棒的Demo
• CESIUM 3D 地球

在線DEMO

• 三種方法創建3D粒子效果
• three-seed - three.js starter project with ES6 and Webpack
• The Aviator - the-aviator-animating-basic-3d-scene-threejs
• Infinite Tubes
• Decorative WebGL Backgrounds
• egraether - Demos
• David Lyons - 3D Artist
• 83個含註釋Demo
• workshop
• Three Bird
• Crystals
• three.js-editor
• 星空
• 3D投影
• voxelpainter
• tunnel-effect
• Altered earth

相關書籍資料

收集整理學習資料。

• 《threejs-intro》----很棒的入門示例
• 《WebGL編程指南》

• 《Three.js開發指南》-- 在線Demo案例
• 《Three.js入門指南》--書例程式碼
• Three.js入門教程 -- 這是對國外一份教程的翻譯，一共六篇文章。講解不多，更多的是展示各個基本功能怎麼用。更適合有一些圖形基礎的同學

同類庫探索

b4w

p5.js

• blend4web

  • Demo案例 - 仿機械革命源計劃-私人定製
• P5.js - 基礎教程

  • p5.js Web Editor - p5在線編輯器
  • OpenProcessing - 各種 demo
  • wangyasai-亞賽大人,很多好玩的效果，👍.

    • Speed-Line - 漫畫必備超燃速度線
    • Play-a-ball - 抽象球體生成器
    • Awesome Masoic - 動態馬賽克背景生成器
    • Perlin Noise - 等高線神器
    • Stars-Emmision - 萬箭齊發毫髮無傷背景生成器
    • Particles-Emission - 粒子循環運動神器