THREE.js 学习笔记（一） - jerrylsxu_H5之家 - 中国HTML5教程资源分享第一站

一. 获取THREE.js

three.js的代码托管在github上面，https://github.com/mrdoob/three.js/

我们可以用git来获取代码，闲麻烦的话也可以直接下载zip文件。

二. 目录结构

拿到代码后先看下three.js的目录结构

|-build

|-custom

|-Three.js

|-examples

|-gui

|-src

|-cameras

|-core

|-extras

|-lights

|-materials

|-objects

|-renderers

|-scenes

|-textures

|-Three.js

|-utils

|-compiler

|-exporters

|-build.bat

|-build.sh

|-build.xml

|-build_all.bat

|-build_all.sh

三. example分析 - webgl trackballcamera earth

QQ截图未命名

examples目录下有该示例

在这个example里我们能够看到：

这里不会逐行逐行代码的分析，而是对于每个特性挑出代码来讲。

一个three.js应用的基本结构。

不管用什么写3d应用，c++的ogre，flash的pv3d，js的o3d，又或者使用场景编辑器，一个3d场景所需要的最基本的东西都是一样的，一个主要的camera，一个主要的scene。

当然一般的场景里都会有物体，有灯光，每个物体都有材质。我们在three.js中可以一个个手动创建，也可以直接加载一个记录场景数据的json文件。

创建一个scene

scene = new THREE.Scene();

创建一个摄像机

camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
camera.position.z = radius * 7;

这段代码确定了一个摄像机的视锥，四个参数分别是摄像机的视锥角度，视口的长宽比，摄像机的近切面(Front Clipping Plane)和远切面(Back Clipping Plane)，为什么要四个参数？其实摄像机本质上就是一个投影矩阵，而建立一个透视投影的矩阵（还有正交投影）需要这四个参数，形象点可以看下图

shenruTS_1

从图中可以看到，要唯一确定一个透视的视锥(Viewing Frustum)至少需要上述的四个参数。

调整摄像机的位置和朝向

创建一个摄像机还需要摆好这个摄像机的位置和朝向，three.js里可以用camera.lookAt函数来设置摄像机的朝向，用camera.position设置摄像机的位置

这个demo里由于创建了一个实现轨迹球控制效果的TrackballControls，因此camera的变换都被封装在这里面了。

如果看lookAt的代码，其实这些操作都是矩阵的操作，摄像机本质上和一个场景中的实体无异，都是使用变换矩阵来做变换。

下面要为场景中添加一些东西了

我们可以在演示中大概看到这个场景中有一个地球，一个月球，周围的太空，还有一个一直照着地球模拟太阳的光照，如果看得仔细点，我们还会发现其实地球外面还包着一层大气层。

下面要一一在场景中添加进入这些东西

1. 首先是地球

在WebGL里创建一个object，我们需要的最基本的数据就是这个object的顶点位置，当然，如果需要这个物体能够入眼的话，我们还需要为它编写shader，需要传入顶点的法线数据，需要传入texcoord来完成纹理映射。

说到shader，我们先看下WebGL中渲染一个物体的基本顺序：

程序会先载入，编译和绑定shader代码，每个渲染批次，显卡都会将这些顶点数据传入流水线，在流水线中会通过Vertex Shader进行顶点位置的变换，光栅化，Fragment Shader中对每个像素计算颜色，最后深度测试等等后输出到屏幕。

THREE.js中将物体顶点数据的管理封装成为geometry接口，将shader和shader中参数的管理封装成为material接口，每次编译加载绑定shader，传入顶点数据都会在WebGLRenderer中统一处理。

var materialNormalMap = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms,
lights: true
});

这里便是创建了一个材质,传入了fragmentShader和vertexShader的代码，uniforms是这两个shader里的参数。

这两个都是可以拿来主义的

var shader = THREE.ShaderUtils.lib[ "normal" ],
uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ "tNormal" ].texture = normalTexture;
uniforms[ "uNormalScale" ].value = 0.85;

uniforms[ "tDiffuse" ].texture = planetTexture;
uniforms[ "tSpecular" ].texture = specularTexture;

uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;

uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
uniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );

uniforms[ "uShininess" ].value = 15;