Awesome-threejs

搜集并学习threejs的相关知识总结、Demo、站点、书籍等，欢迎有兴趣的小伙伴一起交流学习。

Threejs

three.js是以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环。WebGL门槛相对较高,Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本。查看官方实例

基础入门

问-学-记

个人学习过程中的疑问记录及demo演示，小白入门开始教程之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 地球
• minecraft-threejs-clone-我的世界threejs版，还有另一个 threejs-procedural-planets

在线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入门教程 -- 这是对国外一份教程的翻译，一共六篇文章。讲解不多，更多的是展示各个基本功能怎么用。更适合有一些图形基础的同学

同类库探索

• 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 - 粒子循环运动神器