Three.js引擎基础
一、概述
它是使用javascript语言编写的 运行在浏览器中的3D引擎 ，使用简单，其主要功能如下：
（1）方便快捷地创建3D图形
（2）提供多种类型的纹理和材质
（3）自带阴影计算功能
（4）支持多种格式3D物体和骨骼动画
（5）有多种着色器
二、初识
以下为一个简单案例，介绍使用three.js进行开发㮂体步骤。
步骤如下：
（1） 复制下载的three.js文件到名称为util的文件夹中以备开发使用。
（2） 进行代码编写，新建一个html文件，将three.js 文件作为外部引入，然后编写javascript代码。代码如下：
<!DOCTYPE html>
<html>
<head><title>Sample11_1</title><script type="text/javascript" src="util/three.js"></script><style>body{margin: 0;overflow: hidden;}</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">//当网页加载完成后运行的JavaScript方法function init() {var scene = new THREE.Scene();//新建场景//新建摄像机位置var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);var renderer = new THREE.WebGLRenderer();//新建渲染器renderer.setClearColor(new THREE.Color(0xffffff));//设置背景颜色renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染窗口大小var axes = new THREE.AxesHelper(6);//新建坐标辅助对象scene.add(axes);//将坐标辅助对象添加到场景中var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);//创建球体的几何体var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true});//创建基本材质var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.x = 0;//设置球体的位置sphere.position.y = 0;sphere.position.z = 0;scene.add(sphere);//将球体添加到场景中camera.position.x = 10;//设置摄像机位置camera.position.y = 10;camera.position.z = 10;camera.lookAt(scene.position);//设置摄像机焦点//将渲染结果添加到网页的元素中document.getElementById("WebGL-output").appendChild(renderer.domElement);renderScene();function renderScene() {sphere.rotation.y += 0.02;requestAnimationFrame(renderScene);renderer.render(scene, camera);}}window.onload = init;//当网页加载后执行init方法
</script>
</body>
</html>三、组件
（1）场景
场景对象是其它组件的容器，任何物体必须添加到场景中才有可能被绘制，其操作函数如下所示：
Scene.add() 将物体添加到场景中
Scene.remove() 将物体从场景中移除
Scene.children() 获取场景中所有子对象
Scene.getChildName() 根据name属性获取场景中的特定物体
Scene.overideMaterial() 覆盖场景中所有物体的材质
Scene.background() 设置场景的背景颜色
（2）几何对象
长方体 CubeGeometry 平面 PlaneGeometry
球体 SphereGeometry 圆形 CurcleGeometry
圆柱体 CylinderGeometry 正四面体 TetrahedronGeometry
正八面体 OctahedronGeometry 二十面体 IcosahedronGeometry
圆环 TorusGeometry 圆环结 TorusKnotGeometry
(3) 摄像机
正交投影摄像机(画面不“近大远小”，缺层次感和立体感)
创建正交摄像机方法如下：
var camera=new THREE.OrthographicCamera(left,right,top,bottom,near,far)透视投影摄像机（真实感强）
创建透视投影摄像机方法如下：
var canera=new THREE.PerspectiveCamera(fov,aspect,near,far)f ov 视角 aspec t长宽比 near 近平面 far 远平面
（4）摄像机数组
它用来管理 多个摄像机，其初始化如下：
var cameras=new THREE.ArrayCamera() //新建一个摄像机数组变量初始化摄像机组后，即可向数组添加摄像机，包括摄像机的类型、位置、观察点等信息，其核心代码如下：
var subCamera=new THREE.PerspectiveCamera(45,ratio,0.1,100); //建立正交摄像机
subCamera.bounds=THREE.Vecor4(i/count,j/count,size,size); //设置相对位置
subCamera.position.x=(j/count)-0.5; //设置摄像机X坐标
subCamera.position.y=0.5-(i/count); //设置摄像机Y坐标
subCamera.position.z=3.5; //设置摄像机Z坐标
subCamera.lookAt(new THREE.Vector3()); //设置摄像机观察点
subCamera.updateMatrixWorld(); //更新摄像机位置
cameras.push(subCamera); //添加到摄像机组(5) 光源
PointLight(点光源) 位于一点，向所有方向发射光线
AmbientLight （环境光）基础光源，添加到整个场景
SplotLight （聚光灯光源）类似于手电筒和台灯等，产生聚光效果
DirectionalLight （平行光）发出光线近似于平行
Hemisphere （半球光）创建更加自然的室外光线
AreaLighjt（面光源）从指定平面发光线
（6） 材质
材质决定了此物体的颜色，透明度等外观信息。
MeshBasicMaterial(网格基础材质) 赋予对象颜色或者显示线框
MeshDepthMaterial（网格深度材质）根据到摄像机距离决定其颜色值
MeshNormalMaterial（网格法向材质）根据对象表面法向量决定其颜色值
MeshFaceMeterail（网格面材质）各个表面指定不同的颜色
MeshLambertMaterial（网格朗伯材质）考虑光照效果，创建颜色暗淡的物体
MeshPhongMeterial（网格Phong材质）考虑光照效果，创建颜色明亮的物体
ShaderMeterail（着色器材质）自定义着色程序，控制顶点位置和颜色
四、加载
three.js支持加载多种三维文件格式，其中包括顶点、法向量、纹理信息等，有以下格式JSON、 OBJ 、MTL等。
加载OBJ格式示例
var loader=new THREE.OBJLoader(); //创建加载器对象
loader.load("models/cone.obj"); //加载对象五、贴图
材质决定了物体的颜色及质感 ，贴图可以增加物体细节的展示，实现更真实的效果。
（1）纹理贴图
图片可以做为纹理贴图，为保证渲染效果，需用正方形且宽度为2的整数次方的图片。由于纹理渲染时需要放大或者缩小，所以需要设置采样方式，在three.js通过magFilter和minFilter属性进行设置，可选择值如下：
NearestFilter 线性采样（minFilter属性一般设置为此值 ）
LinearFilter 最近点采样（magFilter属性可设置为此值 ）
NearMipmapNearestFilter 选择合适大小Mipmap, 并使用最近点采样方式
NearMipmapLinearFilter： 选择最相近的两个Mipmap,使用最近点采样方式获取两个中间值 ，最后使用线性采样方式
LinearMipmapNearestFilter 选择合适大小Mipmap, 并使用线性采样方式
LinearMipmapLinearFilter 选择最相近的两个Mipmap,使用线性采获取两个中间值 ，最后使用线性采样方式
（2）使用法向贴图
法向贴图中包含的不是颜色值，而是法向量数据，通过与光源的搭配，提升画面的真实感。使用方法，代码如下：
var mat=new THREE.MeshPhongMaterial(); //新建材质
mat.map=textture; //从纹理数据赋值
mat.normalMap=normal; //从法向贴图赋值（3）凹凸贴图
它可以创建出真实的粗糙效果，一般为灰度图，只有高度信息，无坡面方向，用法如下：
var mat=new THREE.MeshPhongMaterial(); //新建材质
mat.map=textture; //从纹理数据赋值
mat.bumpMap=bump; //从凹凸贴图赋值
mat.bumpScale=0.15 //设置凹凸高度，如果为负数，代表凹陷深度值（4）光照贴图
它可以创建出解析度很高的静态阴影，使用平展开的一套UV，贴图尺寸越大，光照效果越细致。使用示例：
groudGeom.faceVertexUvs[1]=groudGeom.faceVertexUvs[0]; //设置光照效果贴图的UV数据（5）高光贴图
它可以实现光照下高亮区效果，颜色值越大（白色大，黑色小），反射能力就越强，通常与法线贴图一起使用，另外还可以对材质的specular属性进行设置，指定高光区的颜色，shininess属性设置，值越大，高光区范围越小，亮度越高。
（6）模型贴花
贴花纹理图的网格对象为DecalsGeometry，其含有4 个参数 ，分别为mesh,、position、orientation、size，即为网格对象，贴花位置，贴花欧拉角，贴花大小。