1.初始three.js

最初，3D类交互项目只应用于桌面应用程序的开发，后面随着webgl的出现及现代浏览器的普及，web 3D开发也逐渐流行起来。

Three.js是基于原生Webgl跟着色器封装的一个3D js引擎。它封装了大量WebGL较复杂的底层实现，为开发者提供了更加方便、更加容易理解的3D渲染API。

webgl主要用于绘制点、线和三角形一些非常底层的系统，想要开发一些实用的复杂的东西往往需要大量的代码。而threejs封装了诸如场景、灯光、材质、阴影、贴图、空间运算等一系列功能，这样开发时就不需要再从webgl底层开始写起了。

three.js整体结构：

上图注意事项：

首先你需要一个渲染器，将相机carema和场景scene传入到渲染器中，然后它会将相机视椎体中的三维场景渲染成一个二维图片显示到画布上；
材质Material对象代表绘制几何体的表面属性，包括使用的颜色，和光亮程度。一个材质Material可以引用一个或多个纹理Texture，这些纹理可以用来，打个比方，将图像包裹到几何体的表面。
纹理Texture对象通常表示一幅要么从文件中加载，要么在画布上生成，要么由另一个场景渲染出的图像。比如一个球体怎么区分是篮球还是足球，就可以通过纹理进行区分；

2.three.js核心对象

Scene 场景

顾名思义：场景是让你在什么地方、摆放什么物品来交给three.js来渲染，即放置物体、光源、相机的地方。

scene使用

新建场景：

const scene = new THREE.Scene(); // 通过构造函数创建Scene对象

添加物体或者相机时 通过scene.add(物体或相机对象) 方法，默认情况下，使用add方法，物体将会被添加到(0,0,0)坐标，与默认相机位置重合；

Camera 相机

由于投影方式的不同，产生了不同类型的相机。正射投影：正交相机 透视投影：透视相机

相机默认位置在原点指向z轴负方向。

透视相机PerspectiveCamera

使用场景：模拟人眼看到的场景--近大远小

PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

正交相机OrthographicCamera

这种投影模式下，不论物体距离相机远还是近，在最终渲染的图片中物体的大小保持不变

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

WebGLRenderer 渲染器

渲染器主要用于将场景内容进行渲染；将相机视椎体中的三维场景渲染成一个二维图片显示到画布上

const renderer = new THREE.WebGLRrenderer();
renderer.render(scene, camera);

用相机渲染一个场景，渲染一般在canvas上完成，如果你没传入canvas给threejs，threejs将会自己创建一个domElement canvas标签，你需要手动添加到文档页面；

// 手动添加到文档页面
eg: document.body.appendChild(renderer.domElement);

建议：自定义传入canvas标签，较为灵活一些

  const canvas = document.querySelector('.box');
  const renderer = new THREE.WebGLRenderer({canvas});

点、线、网格模型

模型是由几何体跟材质构成的，不同的模型的区别在于对几何体顶点数据渲染方式的不同；

Points点模型

Points就是几何体的每个顶点数据渲染成方形区域，方形区域的大小颜色等属性可自定义；

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry 
// 点渲染模式 
var material = new THREE.PointsMaterial({
    color: 0xff0000, size: 5.0 //点对象像素尺寸 
}); //材质对象 
var points = new THREE.Points(geometry, material); //点模型对象

线模型

顾名思义：就是两个顶点确定一条直线，用线条连接顶点数据；

线模型除了Line还有LineLoop和LineSegments,LineLoop和Line区别是连线的时候会闭合把第一个顶点和最后一个顶点连接起来，LineSegments则是顶点不共享，第1、2点确定一条线，第3、4顶点确定一条直线，第2和3点之间不连接。

const geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 线条渲染模式
const material=new THREE.LineBasicMaterial({
    color:0xff0000 //线条颜色
});//材质对象
// 创建线模型对象   构造函数：Line、LineLoop、LineSegments
const line=new THREE.Line(geometry,material);//线条模型对象

网格模型

三个顶点确定一个三角形，网格模型Mesh默认的情况下，通过三角形面绘制渲染几何体的所有顶点，通过一系列的三角形拼接出来一个曲面。网格包含一个几何体及作用在几何体上的材质；

const geometry = new THREE.BoxGeometry(100, 100, 100);
// 三角形面渲染模式  
const material = new THREE.MeshLambertMaterial({
  color: 0x0000ff, //三角面颜色
}); //材质对象
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

轨道控制器

如何360度的控制几何体？这就需要用到轨道控制器，通过控制相机使其围绕几何体运转，来取观察几何体；

创建轨道控制器

const control = new OrbitControls(camera, renderer.domElement);

必传2个参数：

所要控制的相机，即想让哪个相机围绕几何体运转；
渲染的canvas dom对象，用于监听鼠标事件控制相机的围绕运动；

材质

光源

平行光DirectionalLight

太阳光就是平行光，照射到同一平面的不同区域，所接收到入射角都是相同的。所以使用平行光时需要确定光的方向，需要通过position位置(默认0,0,0)和target目标物体(0,0,0)来确定平行光方向；这里需要注意position并不是指光源位置，事实上，太阳光源离我们无限远；

如图：我们可以借助太阳光辅助器DiretionalLightHelper来模拟出平行光。
```
const directionalLight = new THREE.DirectionalLight(0xffffff); // 平行光
directionalLight.position.set(2,3,1);
const lightHelper = new THREE.DirectionalLightHelper(directionanlLight, size, color); // 被模拟的光源、平面尺寸(可选，默认1)、颜色(可选，默认光源颜色)
scene.add(lightHelper);
scend.add(directionalLight);
```