如何学习Three.JS 3D引擎

已经用Three.js做了些小实验，这是一个比较伟大的引擎，你只需要为浏览器的不支持而头疼。你可以用它来创建摄像机(cameras)，对象,(objects), 光照(lights), 材质(materials) 等等。你还可以选择渲染器，Three.js提供了多种渲染方式，如果你想让你的网页支持HTML5你也可以选择使用canvas来渲染，也可以使用WebGL或者SVG来进行渲染。Threejs是开源框架，你如果感兴趣你也可以参与开发。但是现在我只是用这个引擎，也只是把它当作一种小工具。在这里我也给大家演示一下如何学习ThreeJS的基础知识。

   对于ThreeJS的粉丝这是一片很基础的文章，但是对于新手这将很快的使你了解ThreeJS，通常你需要结合大量的实例来分析demo才可以明白。如果你有问题可以直接在mrdoob的论坛上发布， asking questions via GitHub.他会给你做出回答和解决的。如果你有很深奥和着急的问题你也可以发邮件给他们 Mr. doob和AlteredQualia 都会帮组你的。

 

1：基础

  首先我假设你是个有一定基础的3D开发者，并且你可以熟练的掌握和合理的运用javascript语法。如果你没有上述两点那么你需要学习学习，也许你会觉得非常的有趣的。不过javascript确实有点混乱，容易被人头疼。

在我们目前的3D世界当中至少包括以下几点基础的东西，我会给大家一一介绍。

 一： 一个场景

二： 一个渲染器

三： 一个摄像机

四： 一个对象或者至少两个材质

当然你也可以做很多的东西，很多非常疯狂的东西，只要很有足够的想象力，那么就开始你的3D开发，做出很多很炫的WebGL作品吧。

2： 支持

 开发WebGL需要浏览器的大力支持，google的chrome是我在做demo的时候常用的浏览器，个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas，webgl，svg这一块。火狐个人觉得排名第二那么google就肯定第一了，并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些，但是在渲染的支持上还是很强的。Opear和Safari也支持webgl，但是他们当前的版本只支持canvas渲染，IE9也只支持canvas渲染，到目前为止还没有听到微软说全面支持webgl的消息，担忧啊。

3：设置场景（Scene）

这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了，并且选好了你要使用的渲染方式了canvas，因为canvas还是比较标准些。Canvas不只是支持WebGL，还有更多的支持。不过，WebGL运行在你cpu的图形卡上，这样就意味着你的cpu可以专心的做别的事，而不需要为webgl渲染而担心，这就叫做硬件加速渲染。

 无论你选择什么样的渲染机制，但是你需要记住的就是javascript需要很好的优化性能，因为3D对于浏览器来说还是很大的渲染，所以在你的javascript代码中尽量减少浏览器的压力，优化优化再优化你的javascript代码。

 那么这样的话，你可以下载you have downloadedThreeJS的多有js文件在你的电脑中，那么先看看如何着手建立一个Threejs的场景，看下面代码行：

JavaScript Code 复制内容到剪贴板

1. // set the scene size  
2. var WIDTH = 400,  
3.     HEIGHT = 300;  
4.   
5. // 设置相机的属性s  
6. var VIEW_ANGLE = 45,  
7.     ASPECT = WIDTH / HEIGHT,  
8.     NEAR = 0.1,  
9.     FAR = 10000;  
10.   
11. // 得到dom的元素  
12. // - 假设我们有jquery的开发经验  
13. var $container = $('#container');  
14.   
15. // 创建一个WebGL的渲染器和摄像机和一个场景  
16.   
17. var renderer = new THREE.WebGLRenderer();  
18. var camera = new THREE.Camera(  VIEW_ANGLE,  
19.                                 ASPECT,  
20.                                 NEAR,  
21.                                 FAR  );  
22. var scene = new THREE.Scene();  
23.   
24. // 摄像机从 0,0,0开始 ，因此默认原点，需要时回滚  
25.   
26. //设置摄像机z坐标位置距离原点向外300  
27. camera.position.z = 300;  
28.   
29. // 开始渲染  
30. renderer.setSize(WIDTH, HEIGHT);  
31.   
32. // 加载dom的元素  
33. $container.append(renderer.domElement);  

看起来挺简单的，不是很难。

4：做一个网格模型

   现在我们有一个场景，一个摄像机，一个渲染器，但是我们需要画一个实体。实际上Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。现在我们要做的是一个网格的元素，相对比较基础的东西(球体)Spheres, (飞机)Planes,(立方体) Cubes ， (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。

JavaScript Code 复制内容到剪贴板

1. //定义球体  
2. var radius = 50, segments = 16, rings = 16;  
3.   
4. // 创建一个新的网格球体几何学 -  
5. // 在下一节我们将要涉及到sphereMaterial   
6. var sphere = new THREE.Mesh(  
7.    new Sphere(radius, segments, rings),  
8.    sphereMaterial);  
9.   
10. // 添加球体到场景  
11. scene.addChild(sphere);  

好了！但是我们的这个球体没有材质。在代码中我们使用了一个变量sphereMaterial，但是我们还没有对他进行定义。首先我们需要做的是对球体的材质进行描述。

5：材质（Materials）

 毫无疑问这在Three.Js中是很重要的一部分，因为Three.js可以让你很方便的实现你的网格效果。

   1：不发光

   2：发光

   3：多面

还有很多很多，现在我只介绍这些，剩下的由你自己去发现。但是你必须写在WebGL的着色器上，着色器是一个很庞大的东西，但是你可以使用GLSL(OpenGL的着色语言)。这就需要你用数学来实现模拟的灯光，这样会很复杂。但是多亏了Three.js，你可以不需要在做那样的数学计算了，如果你想写关于阴影的那么你可以使用MeshShaderMaterial来实现，所以这是一个很活泛的设置。

JavaScript Code 复制内容到剪贴板

1. // 创建一个球体的材质  
2. var sphereMaterial = new THREE.MeshLambertMaterial(  
3. {  
4.     color: 0xCC0000  
5. });  

你也可以创建一个其他的材质，除了颜色，比如平滑或者环境的地图。你可以看看这个页面check out the Wiki page，看看你还可以创建什么材质，实际上任何一个引擎都会提供给你的。

6：灯(Lights)

如果你按照上面的实现，那么你现在可以看到一个空色的圆球。但是我们现在有材质却没有光，Three.js默认的是全环境的光，那么我们需要把这些光修理的好点。

JavaScript Code 复制内容到剪贴板

1. // 创建一个光的源点  
2. var pointLight = new THREE.PointLight( 0xFFFFFF );  
3.   
4. // 设置光源点位置  
5. pointLight.position.x = 10;  
6. pointLight.position.y = 50;  
7. pointLight.position.z = 130;  
8.   
9. // 添加到场景  
10. scene.addLight(pointLight);  

7：循环渲染

现在我们大概算是有一些渲染了，但是我们需要这样做：

JavaScript Code 复制内容到剪贴板

1. // 绘画!  
2. renderer.render(scene, camera);  

我们渲染但不一定只是一次，所以如果你想循环渲染，那么你就需要好好的利用requestAnimationFrame这个js类，这是在浏览器中处理动画迄今为止最先进的js代码，但是到目前为止还不是完全支持，所以推介你看看 Paul Irish's shim.。

JavaScript Code 复制内容到剪贴板

1. // 设置回滚时间  
2. window.requestAnimFrame = (function(){  
3.   return  window.requestAnimationFrame       ||  
4.           window.webkitRequestAnimationFrame ||  
5.           window.mozRequestAnimationFrame    ||  
6.           window.oRequestAnimationFrame      ||  
7.           window.msRequestAnimationFrame     ||  
8.           function(/* function */ callback, /* DOMElement */ element){  
9.             window.setTimeout(callback, 1000 / 60);  
10.           };  
11. })();  
12.   
13. // 插入setInterval(render, 16) ....  
14. (function animloop(){  
15.   render();  
16.   requestAnimFrame(animloop, element);  
17. })();  

代码：

JavaScript Code 复制内容到剪贴板

1. // requestAnim shim layer by Paul Irish  
2.     window.requestAnimFrame = (function(){  
3.       return  window.requestAnimationFrame       ||  
4.               window.webkitRequestAnimationFrame ||  
5.               window.mozRequestAnimationFrame    ||  
6.               window.oRequestAnimationFrame      ||  
7.               window.msRequestAnimationFrame     ||  
8.               function(/* function */ callback, /* DOMElement */ element){  
9.                 window.setTimeout(callback, 1000 / 60);  
10.               };  
11.     })();  
12.    
13.    
14. // example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/  
15.    
16. var canvas, context;  
17.    
18. init();  
19. animate();  
20.    
21. function init() {  
22.    
23.     canvas = document.createElement( 'canvas' );  
24.     canvas.width = 256;  
25.     canvas.height = 256;  
26.    
27.     context = canvas.getContext( '2d' );  
28.    
29.     document.body.appendChild( canvas );  
30.    
31. }  
32.    
33. function animate() {  
34.     requestAnimFrame( animate );  
35.     draw();  
36.    
37. }  
38.    
39. function draw() {  
40.    
41.     var time = new Date().getTime() * 0.002;  
42.     var x = Math.sin( time ) * 96 + 128;  
43.     var y = Math.cos( time * 0.9 ) * 96 + 128;  
44.    
45.     context.fillStyle = 'rgb(245,245,245)';  
46.     context.fillRect( 0, 0, 255, 255 );  
47.    
48.     context.fillStyle = 'rgb(255,0,0)';  
49.     context.beginPath();  
50.     context.arc( x, y, 10, 0, Math.PI * 2, true );  
51.     context.closePath();  
52.     context.fill();  
53.    
54. }  

8常见的对象的特性

如果你花时间看代码的话，你会看到很多Three.js继承的Object3D的对象，这是一个很基础的对象，包含很多非常有用的特征，位置，旋转，大小的信息。特别的是我们的网格也是继承与Object3D，他加了自己的一些特性：材质和几何。

你想知道为什么我会说到这里，那么你想画一个球体在你的web上什么都不做吗？这些特征的存在值得你去研究，因为他们允许你去操作潜在的材质和网格划分。

JavaScript Code 复制内容到剪贴板

1. // 几何球面  
2. sphere.geometry  
3.   
4. // 包含顶点和面  
5. sphere.geometry.vertices // 数组  
6. sphere.geometry.faces // 以数组形式  
7.   
8. // 位置  
9. sphere.position // 包括x，y，z三个属性  
10. sphere.rotation // 包括x，y，z三个属性  
11. sphere.scale // 包括x，y，z三个属性  

9：一个小的更改

 在顶点这里我们需要做个更改，你尝试更改你的顶点数据，但是你会发现你的渲染一点没有改变，这是为什么呢?因为Three.js是一向很复杂的优化，你只需要更换其中的一个方法就可以，

JavaScript Code 复制内容到剪贴板

1. // 改变顶点  
2. sphere.geometry.__dirtyVertices = true;  
3.   
4. // 改变法线  
5. sphere.geometry.__dirtyNormals = true;  

其实还有很多，但是这两个是我发现最重要的，你会发现只改变这个就省去很多不必要的计算。

结论：

我想你已经大致了解这个关于Three.js的简单介绍了，你可以自己动手尝试做些实例了，你会发现3D在网页中也是非常有趣的。Three.js为你解决了很多头疼的问题，你就可以做出很酷的效果了。