====== WebGl/Thress.js ======
===== 介绍以及下载=====
什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。
Three.js的下载地址：https://github.com/mrdoob/three.js
Three.js中文文档：http://www.techbrood.com/threejs/docs
===== Three.js根目录 =====
![YC_FOGYMMKNCG)EQDZO]2TL.png](https://img.haomeiwen.com/i6868890/54b3c289d8391da4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。
Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
Src目录：源代码目录，里面是所有源代码。
Test目录：一些测试代码，基本没用。
Utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.gitignore文件：git工具的过滤规则文件，没有用。
CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。
LICENSE文件：版权信息。
README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。
===== Three.js的插件 =====
暂时用了vsCode ,webStorm都没有很好能够自动补全three的插件，等日后找到了再补上
===== 测试当前Three的版本 =====
在html页面中
4)@8$WPOZ}G@K2L@OG25M88.png
====== 学习笔记 ======
===== 一些教程网站 =====
http://www.hewebgl.com/（初级教程很详细（包含视频，页面，示例文件），但是中高级教程收费）
http://www.ituring.com.cn/book/1272（别人推荐还没看过）
https://threejs.org/（英文教程，有很多很棒的例子）
还有一些很好的入门教学博客，但很多都只有1 2章入门教学，之后再没更新
http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
http://blog.csdn.net/acdreamers/article/details/18192955\
等
==== 实现要素 ====
1.渲染器（Renderer）
2.摄像机（Camera）
3.场景（Scene）
4.物体
5.光源（Light）
=== 渲染器 ===
渲染器将和Canvas元素进行绑定，并设置渲染器的大小，这样才能将图像现实在绑定的canvas中
1.png
=== 场景 ===
在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景里没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。\
场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。
=== 摄像机 ===
首先WebGL和Three.js使用的坐标系是右手坐标系，看起来就是这样的
2.png
相机包含两种：
1.正交相机
2.透视相机
先添加相机，在调整相机的位置，朝向，以及焦点
3.png
最后记得把相机添加到scene中
== 光源 ==
OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
4.png
在Threejs中，光源用Light表示，它是所有光源的基类。它的构造函数是：
THREE.Light ( hex )
它有一个参数hex，接受一个16进制的颜色值。例如要定义一种红色的光源，我们可以这样来定义：
Var redLight = new THREE.Light(0xFF0000);
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景
5.png
== 事物 ==
创建一个object 函数用来存放事物
这里以一条直线为例子
首先创建一个几何体类
其次定义几何体材质，用于改变几何体的颜色
因为以线为例子，由于几何体本身是由点组成的，所以在选择特定材质之后，定义点的颜色
及是线的颜色。
最后再把事物添加到场景中。
6.png
最后再把场景，摄像机，放到渲染其中。实现3d图像渲染。
renderer.render(scene, camera);
7.png
网友评论