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
贴图素材
在线站点
- 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入门教程 -- 这是对国外一份教程的翻译，一共六篇文章。讲解不多，更多的是展示各个基本功能怎么用。更适合有一些图形基础的同学
同类库探索
-
-
p5.js Web Editor - p5在线编辑器
-
OpenProcessing - 各种 demo
-
wangyasai-亚赛大人,很多好玩的效果，
👍 .- Speed-Line - 漫画必备超燃速度线
- Play-a-ball - 抽象球体生成器
- Awesome Masoic - 动态马赛克背景生成器
- Perlin Noise - 等高线神器
- Stars-Emmision - 万箭齐发毫发无伤背景生成器
- Particles-Emission - 粒子循环运动神器
-