关于怎样使用three.js的小教程<一>

昨天看了看three.js这个东西，身为一个3D引擎，他还是很强大的。官网上有个tutorial讲的不甚详细。 http://aerotwist.com/tutorials/getting-started-with-three-js/

扯淡的内容比较多，有个人做了翻译在这里http://blog.csdn.net/webgl_/article/details/6424749

有一个外国人的教程系列是这个http://www.smashinglabs.pl/three-js-tetris-tutorial粗略看了一下是好像做一个俄罗斯方块，代码比较多。

有一个中国人写的教程在这里http://www.html5china.com/HTML5features/WebGL/20111129_2989.html代码比较少，不过有很多经典的图。

在github上面可以获取到three.js的源码，直接下载ZIP就行了https://github.com/mrdoob/three.js/

目前google chrome是不支持xp的webGL的，opera最近推出了一个实验版支持xp下的webGL，使用xp的用户可以搜一下。

目录大概是这个样子，build中装的是压缩好的js代码，使用Three.js的时候只需要包含./build/Three.js就可以了。./build/custom 之中应该提供了一些供你自定义使用的脚本。

./docs 下提供了一个非常简陋的API文档，不过可以将就着看。

./examples 里面有非常多的例子，这个非常好。其中比较多的是webGL开头的和Canvas开头的文件，大概是提供了，两种技术实现的比较，webGL比Canvas快100倍(非官方统计)，毕竟webGL使用了硬件加速嘛，比较明显的看canvas_geometry_hierarchy.ht和webgl_geometry_hierarchy.html这两个例子。./examples 的子文件夹下面是一些 元素的脚本 比如 ./js/ShaderExtra.js 就是一些现成的shader代码，可以直接拿来用，或者一些字体和统计FPS的脚本，three.js里面用的是./js/stats.js这个脚本来做一些统计工作。还有就是一些models什么的。

./src 里面放的就是源码了

./gui 里面应该是一些图形化的东西，没有仔细研究。

./utils 里面是一些工具，应该是一些编译连接的脚本什么的。

three.js的使用比较简单，一个主要的camera ，一个主要的 scene ，一个render(这个东西翻译成渲染器，就是Canvas，WebGL，SVG什么的)，其它的light , materials,object,虾米的都是为了好看用的。

先说这个Camera ,three.js的camera有很多种,最简单的叫做这个perspectiveCamera透视相机，或者这个远景相机，这样来新建一个实例。

[javascript]  view plain copy

1. var camera, scene, renderer;  
2. var windowHalfX = window.innerWidth / 2;  
3. var windowHalfY = window.innerHeight / 2;  
4. camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 10000 );  
5. camera.position.z = 1000;  

四个属性分别是，摄像机的视锥角度，视口的长宽比，摄像机的近切面(Front Clipping Plane)和远切面(Back Clipping Plane)，这样就确定了摄像机的视锥。

position.z是垂直于屏幕，也就是近切面远切面的距离。

当然还可以通过camera.lookAt来调整camera的朝向，不过在这里没必要。

以地球举例，假设地球垂直摆放，视锥角度很小时，只能看到赤道周围的图像，近切面远切面相距过近时只能看到东半球或西半球，这个说也说不太清楚，自己改改参数试一试，就行。

scene的创建很简单，直接new一下就好，然后就是把各种东西add到sence里面就行了，就像这样。

[javascript]  view plain copy

1. var camera, scene, renderer;  
2. scene = new THREE.Scene();  
3. scene.add( camera );  

接下来就是添加一些object，这里我们使用一个叫做mesh的东西，使用这个网格模型，比较容易建立简单的几何体，球体啊，柱体啊，什么的，当然很炫的modal还需要maya之类的专业工具。

mesh的结构是这样的

[javascript]  view plain copy

1. var mesh;  
2. mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );  
3. scene.add( mesh );  

创建一个球体的函数是这样

THERE.SphereGeomrtry(radius, segments, rings) 第一个参数是半径，后两个可以理解成球体的精细程度，数值越高球体就越圆，可以吧后两个参数调低自己体会一下。

THERE.MeshBasicMaterial() 就是材质了，如果想要一个单色材质的话可以这样

[javascript]  view plain copy

1. var sphereMaterial = new THREE.MeshLambertMaterial(  
2. {  
3.     color: 0xCC0000  
4. });  

使用自定义图片的话是这样,overdraw是过度渲染的一个开关现在还不重要。

[javascript]  view plain copy

1.    
2. var sphereMaterial = new THREE.MeshBasicMaterial(   
3. {   
4.     map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true   
5. } ) );  

最后设置一下mesh的位置，把它加入到scene中就可以了

[javascript]  view plain copy

1. mesh.position.y = - 250;  
2. mesh.rotation.x = - 90 * Math.PI / 180;  
3. scene.add( mesh );  

渲染器的创建也很简单，这里使用的是一个CanvasRenderer，最后需要把render的dom加到container的最后，简单点说就是，通过渲染器吧3D图像输出到页面上。

至于dom结构的介绍在这里http://www.w3school.com.cn/htmldom/是一个树形结构，appendChild方法，是把参数里的dom添加到指定节点，的最后一个节点。

[javascript]  view plain copy

1. var container = document.getElementById( 'container' );  
2. renderer = new THREE.CanvasRenderer();  
3. renderer.setSize( window.innerWidth, window.innerHeight );  
4. container.appendChild( renderer.domElement );  

循环渲染，实现3D图形的动态需要不断改变camera的位置，通过不断的渲染来达成动画的效果

render方法实现视角的转换，

animate方法实现循环渲染，

原理是无限递归调用，requestAnimationFrame这个函数很牛逼，有兴趣可以看看源码。

stats.update();是更新FPS的不用管。

[javascript]  view plain copy

1. function animate() {  
2.         requestAnimationFrame( animate );  
3.         render();  
4.         stats.update();  
5.   
6.     }  
7.   
8. function render() {  
9.         camera.position.x += ( mouseX - camera.position.x ) * 0.05;  
10.         camera.position.y += ( - mouseY - camera.position.y ) * 0.05;  
11.         camera.lookAt( scene.position );  
12.         mesh.rotation.y -= 0.005;  
13.         renderer.render( scene, camera );  
14.   
15.             }  

最后把代码整合起来是这样的，实现了一个，转动的地球。代码中用到的两张图片在exmples/textures中可以找到

[javascript]  view plain copy

1. <!doctype html>  
2. <html lang="en">  
3.     <head>  
4.         <title>three.js canvas - geometry - earth</title>  
5.         <meta charset="utf-8">  
6.         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">  
7.         <style>  
8.             body {  
9.                 color: #808080;  
10.                 font-family:Monospace;  
11.                 font-size:13px;  
12.                 text-align:center;  
13.   
14.                 background-color: #ffffff;  
15.                 margin: 0px;  
16.                 overflow: hidden;  
17.             }  
18.  
19.             #info {  
20.                 position: absolute;  
21.                 top: 0px; width: 100%;  
22.                 padding: 5px;  
23.             }  
24.   
25.             a {  
26.   
27.                 color: #0080ff;  
28.             }  
29.   
30.         </style>  
31.     </head>  
32.     <body>  
33.   
34.           
35.         <div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>  
36.         <div id="container"></div>          //存放场景的块  
37.         <script src="./Three.js"></script>    //直接把Three.js放在同样目录下就可以了  
38.         <script src="./Stats.js"></script><span style="white-space:pre">    </span>//这个是统计FPS的，没什么用，觉得麻烦的话可以吧与Stats有关的代码删掉  
39.   
40.         <script>  
41.   
42.             var container, stats;  
43.             var camera, scene, renderer;  
44.             var mesh;  
45.             var mouseX = 0, mouseY = 0;  
46.   
47.             var windowHalfX = window.innerWidth / 2;  
48.             var windowHalfY = window.innerHeight / 2;  
49.   
50.             init();         //初始化  
51.             animate();      //循环渲染  
52.   
53.             function init() {  
54.   
55.                 container = document.getElementById( 'container' );  
56.   
57.                 scene = new THREE.Scene();  
58.   
59.                 camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 10000 );  
60.                 camera.position.z = 1000;  
61.                 scene.add( camera );  
62.                                //创建球体  
63.                 mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './shadow.png' ), overdraw: true } ) );  
64.                 mesh.position.y = - 250;  
65.                 mesh.rotation.x = - 90 * Math.PI / 180;  
66.                 scene.add( mesh );  
67.                                 //创建阴影  
68.                 mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );  
69.                 scene.add( mesh );  
70.   
71.                 renderer = new THREE.CanvasRenderer();  
72.                 renderer.setSize( window.innerWidth, window.innerHeight );  
73.   
74.                 container.appendChild( renderer.domElement );  
75.   
76.                 stats = new Stats();  
77.                 stats.domElement.style.position = 'absolute';  
78.                 stats.domElement.style.top = '0px';  
79.                 container.appendChild( stats.domElement );  
80.   
81.             }  
82.   
83.             function animate() {  
84.   
85.                 requestAnimationFrame( animate );  
86.   
87.                 render();  
88.                 stats.update();  
89.   
90.             }  
91.   
92.             function render() {  
93.   
94.                 camera.position.x += ( mouseX - camera.position.x ) * 0.05;  
95.                 camera.position.y += ( - mouseY - camera.position.y ) * 0.05;  
96.                 camera.lookAt( scene.position );  
97.   
98.                 mesh.rotation.y -= 0.005;  
99.   
100.                 renderer.render( scene, camera );  
101.   
102.             }  
103.   
104.   
105.         </script>  
106.   
107.     </body>  
108. </html>  

Deom的打包资源，可以在我的上传资源中下载。

http://download.csdn.net/detail/wangyi_lin/4164117