关于Three.js

?

一. 获取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

?

1. build目录下是源代码连接压缩过后的js文件，而连接和压缩源代码的工具放在utils目录下，在utils目录下还有一个exporters目录，是各种模型导出工具，插件，有blender和max的导出插件，还有把fbx转成THREE.js场景文件的python脚本。
2. examples目录下都是three.js的示例，值得一提的是，里面有很多实用的shader脚本和js脚本可以拿来在自己的项目里用，比如js/ShaderExtra.js提供了很多现成的shader代码，js/postprocessing下提供了封装起来的几种常用的后处理的接口
3. gui下面是一些封装后的ui接口
4. src当然就是重头戏了，three.js的源代码都在这个目录下，src里下的各个子目录也很好的体现了three.js的构成，像camera，light，object这些都是一个场景（scene）的基础对象，而scenes下面则是对整个场景的管理代码，像scene graph的实现，renderers下是核心渲染器的实现，three.js对于场景和渲染器分离的还不错，可以用不同的renderer渲染同一个场景，当然对于一些WebGL支持的高级特性，使用其它的renderer肯定是不行的。还有一个extras目录是在核心代码之上的一些未程序提供便利的接口，比如提供了一些常用的camera，material，light。
5. utils目录上面已提过

?

三. example分析 - webgl trackballcamera earth

?

在线地址：http://216.108.229.22/examples/webgl_trackballcamera_earth.html

examples目录下也有该示例

?

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

• 一个最基本的three.js应用需要有的东西
• camera的创建以及camera control的添加
• 基本形体的创建，材质的创建
• 粒子系统的创建，这个会后面讲。

?

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

?

一个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)，为什么要四个参数？其实摄像机本质上就是一个投影矩阵，而建立一个透视投影的矩阵（还有正交投影）需要这四个参数，形象点可以看下图