LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
  • Threejs
  • 基礎入門
  • 問-學-記
  • 進階教程
  • 踩坑經驗
  • Shader 相關資料
  • shader 效果
  • 網上收集資料
  • Threejs 相關的庫
  • 貼圖素材
  • 在線 網站
  • 在線DEMO
  • 相關書籍資料
  • 同類庫探索
Export as PDF
  1. webgl

Awesome-threejs

PreviouswebglNextdocs

Last updated 2 years ago

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

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

基礎入門

問-學-記

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

進階教程

踩坑經驗

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

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

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

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

Shader 相關資料

shader 效果

網上收集資料

Threejs 相關的庫

貼圖素材

在線 網站

在線DEMO

相關書籍資料

收集整理學習資料。

  • 《WebGL編程指南》

同類庫探索

以下經驗來自

--一本關於 Fragment Shaders(片段著色器)的入門指南

- Shaders 在線編輯器

- 有關電腦圖形學、著色器的部落格程式碼示例

- 基礎程式碼示例

用如上 可以查看效果

官網推薦入門教程

- 很多牛X的Demo

- 也是很棒的Demo

- three.js starter project with ES6 and Webpack

- the-aviator-animating-basic-3d-scene-threejs

----很棒的入門示例

《Three.js開發指南》--

--

-- 這是對國外一份教程的翻譯,一共六篇文章。講解不多,更多的是展示各個基本功能怎麼用。更適合有一些圖形基礎的同學

-

- p5在線編輯器

- 各種 demo

wangyasai-,很多好玩的效果,👍.

- 漫畫必備超燃速度線

- 抽象球體生成器

- 動態馬賽克背景生成器

- 等高線神器

- 萬箭齊發毫髮無傷背景生成器

- 粒子循環運動神器

Threejs
官方實例
什麼是WebGL?
開始第一個Hello world
三維空間中觀察物體的方法--照相機
創建各種幾何形狀
光影之謎
給創建的物體賦予材質
讓物體動起來
運動3D物體的性能監測
載入外部3D模型
有趣的著色器
創建自己的全景圖
obj、mtl文件格式詳解
理解光源的應用
OpenGL GLSL 基礎語法和函數
GLSL 中文手冊
快樂小球球
LearnOpenGL-CN
The Book of Shaders
The Book of Shaders Editor
Inigo Quilez
Introducing Shaders
pixelshaders
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 的文章發布
tween lite
dat.gui: 一個輕量級的視覺化庫供開發者調試變數使用
csg.js: 封裝了幾何體合併、取交集、取非交集的方法
headtraker
html_gl
threex
ar.js
3dwarehouse
行星素材
Clara.io 3D素材
Shadertoy 著色器
各種著色器 demo 文章
marpi.pl
Altered Qualia
CESIUM 3D 地球
三種方法創建3D粒子效果
three-seed
The Aviator
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》
在線Demo案例
《Three.js入門指南》
書例程式碼
Three.js入門教程
blend4web
Demo案例 - 仿機械革命源計劃-私人定製
P5.js
基礎教程
p5.js Web Editor
OpenProcessing
亞賽大人
Speed-Line
Play-a-ball
Awesome Masoic
Perlin Noise
Stars-Emmision
Particles-Emission
b4w
p5.js