Three.js自学碎碎叨（Day 1）

一直就很想学习WebGL相关的知识，如今也找到了工做，生活也差很少趋向稳定了，加上学校也没那么多课程了，因此我确定要利用起来这个时间啊！由于腿摔伤了，国庆估计是在家躺7天，因此更加要抓住这么好的学习时机了。
如你所见，这系列文章都是我本身的碎碎叨，固然啦，目的是为了能更好的梳理本身学习的知识，增强印象，顺便再来作个总结，这样能更加扎实的学习。
个人状况是，有前端基础，有PS基础，无计算机图形学基础，没有学过OpenGL，而我以为，立体的图像比起2D的来讲，可能更难以理解，由于首先，没有图形学的基础，游戏建模的经验，因此要经过联想来达成对概念的理解是比较困难的，可是我以为只要多看多试验，实在不行就问问身边的同窗，不必定要是图形学的“专家”，美术生也是不错的选择哦！这样总会明白的，因此让咱们开始今天的学习吧！

搜刮来的学习资料

个人学习资料主要是来源于下面的清单（但是找了很久，才找到了这么多😂，固然还有加上百度各类文章）：

• Three.js官方文档：官方的确定是杠杠的！
• 郭隆邦的技术博客：我以为很适合没基础的人学习，就是网页的排版不太舒服。
• Three.js入门指南：是很知乎上很著名的女神写的，内容虽然很简洁，可是对于没有图形学基础的人来看有的地方仍是很差理解。
• ａｅｓｔｈＥｔｉｃ，ＣＹＢＥＲの ａｕｄｉｏ / ＶＩＳＵＡＬ，網頁中的聲音與影像研究：这个写的很好，不过不适合初学者看，讲的也偏向于简单介绍吧
• 航哥Three.js入门教程：这个系列的文章还不错呢！
• 极客学院WebGL教程：固然学生党没啥钱，如今只能看免费的😂

WebGL初印象

WebGL也是在Canvas上绘制成的。
可是它仍是有一点不同，由于它除了要HTML、JS来写以外，还须要一个叫作着色器语言的东西，而WebGL使用的是GLSL ES，这就是说做为前端的咱们，还得去学习另外一门语言才行。
至于这其中的道理就是，Javascript经过浏览器的JS解释器控制CPU，经过CPU来控制GPU，GPU就是图形处理器，着色器语言构成的代码被编译后再交给GPU去执行。因此在写WebGL的时候，你会看到一大段相似于C语言的代码字符串被赋予给一个变量。
而对于咱们新手来讲，确定是一脸懵逼的，因此咱们对WebGL有一个简单的印象后，从Three.js开始入手学习，Three.js对这些都进行了一个很好的封装，咱们就能够先不去考虑这些稍微原生态的东西。

Three.js初印象

Github地址：https://github.com/mrdoob/thr...
咱们确定要先从简单的入手啦！虽然官方git仓库东西丰富，看的眼花缭乱！咱们能够直接引入一个three.min.js的cdn连接就开始写咱们的程序。

通常状况下，咱们能够在HTML文档里先写一个canvas标签，最后把咱们的内容挂载上去，可是你们彷佛更倾向于一切都在JS代码中完成，也就是最后appendChild到body上面去。

三个要素

咱们能够想像本身是在拍摄一张照片！好比，要拍摄淘宝的商品图片。
这时候咱们就须要布置一个场景，咱们能够放（add）一个苹果，而后加一个光照，最后再拿相机摆好位置拍下来！而后再把成像洗出来。
而Three.js成像的过程也很相似于这样，咱们每次要做一幅新画的时候，就须要一个场景（Scene）对象、照相机(Camera)对象，还有渲染器（Renderer）！

个人第一个🌰

var scene = new THREE.Scene();

var box = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0x0000ff});
var mesh = new THREE.Mesh(box, material);
scene.add(mesh);

var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);

var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 100;

var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

如下是下面这段代码的预览图：

以上的大段代码来自于我学习资料中的第一个网站！看不懂不要紧，这时候其实我也还没细细看呢，咱们一个个来看哦！

场景篇

第一段代码，是关于咱们建立了一个场景对象的！
这个比较简单，就是new了一个对象😅

var scene = new THREE.Scene();

不事后面咱们能够看到相关的代码还有scene.add(point);之类的，其实就是相似于咱们说过的，向场景里去添加东西啦！咱们能够看看场景对象的内部结构：

眼花缭乱，东西好多啊！可是咱们能够看到它有一个children属性，下面放的就是一个数组，就是咱们add进去的东西哦！这样就更好理解了！

盒子篇

能够看到，这个场景，咱们就是放了一个正方体进去！

var box = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0x0000ff});
var mesh = new THREE.Mesh(box, material);
scene.add(mesh);

BoxGeometry是什么呢

固然就是建立一个“盒子”对象咯，也就是一个块，长方体呀正方体啊均可以，给它设置参数就好了。三个参数分别表示width, height和depth。这里都是100，因此就是一个正方体啦！（能够本身修改下参数试试）

为何还有一个Material呢

咱们能够看到，咱们最后用Mesh这个方法，把Box和Material结合起来了，字如其名！Material就是材料啦！若是咱们不给Box添加任何材料的话，那就是一个”骨架”了，因此这里可能和我一开始的想象不同，咱们须要给Box制定它的材质，这个东西才能出来！

光源篇

咱们能够想象，假如咱们东西都摆好了，可是没有灯的话，就是一片漆黑，因此这里还有不少光源的对象。这里咱们就先了解这里用的两种光：点光源（point）和环境光（ambient）。

假如没有任何的光，它就是乌漆麻黑的看不见！！

那么首先咱们来研究一下点光源！

var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);

咱们给它添加了白色的光，重要的是在于这个位置的理解。咱们根据经验也能够推断是这是x，y和z三个坐标值。通过我不断的改变这个位置值，看下图分别是(100, 100, 0)和(100, 100, 100)的状况，咱们能够根据光线的变化来推断出光源的位置，从而知道坐标轴的设置：


随后查过资料后，发现Three.js使用的确实是右手坐标系，这里是与OpenGL同步默认的状况：

下面我模拟了一下从(0, 0, 100)到(0, 200, 100)的变化状况，也就是灯光从下一直上升到了上面。

咱们再来看看环境光～
我尝试着只给Cube添加一个#FFF最亮的白光，能够看到它所有都亮了，颜色就是咱们最初给Cube的颜色。咱们能够发现这个环境光是均匀的，不会像点光源同样有一个强弱的减小。也就是说咱们能够利用它来给咱们提供一个布景的基础。

照相机篇

照相机我以为对于咱们这种没有图形学基础和建模经验的人来讲，应该是比较难理解的，首先是咱们要知道有两种成像相机：

• 正交投影照相机：Orthographic Camera
• 透视投影照相机：PerspectiveCamera

其中透视投影是符合咱们眼睛成像的原理的，就是说东西并非远近同样的大小，好比下面这张桌子，咱们能够感受到离咱们近的这边要更“大”一些：

而正交投影就不同了，好比咱们能够看下面这张建模图，就是方方正正的，参考线都是平行的：

好，下面咱们来认识一下照相机里面的几个参数：左、右、上、下、近、远。
这就相似于你相机成像的位置，也就是说可能画布是无限大的，可是相机只能拍出部分景象。

这里比较难理解的就是近和远，彷佛又和咱们想像的同样，根据我本身的测试，我感受它更像一个盒子，就是说超出这个范围的东西都会被割掉。
好比，当我把near值调大一点的时候，能够看到出现了一个缺口，也就是说相机距离的很近，因此出现了一个三角形的缺口。

另外咱们能够知道，这个左-右/上-下的比例应该与画布的比例同样，要否则图像的宽高比确定会变化，会被压缩。

固然啦，咱们有了一个相机，一定要设置好它的位置，以及它朝着的方向。

渲染器篇

最后，一切就绪，咱们就能够用渲染器把这个图像渲染出来。
而后用document.body.appendChild(renderer.domElement);把渲染器渲染出来的元素添加到body中，再调用render函数进行渲染，就完毕了。
若是想要作动画效果，就再函数里动态改变一些数值，从新调用渲染方法，就能够达到了。

小结

今天是我学习Three.js的第一天，我经过一个基本的例子，对Three.js里面的一些基础的概念有了一点了解。不过有的细节仍是不太懂，也有一些本身的疑问，这还须要后面更多的学习。另外，由于我也是新手，可能会有一些本身理解的不对的地方，欢迎指出来！^—^