Three.js 第一篇：绘制一个静态的3D球体

1|0 第一篇就画一个球体吧

　　首先我们知道Three.js其实是一个3D的JS引擎，其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的。那么，我们在写这一篇绘制3D球体的文章的时候，应该注意哪些地方呢？下面我就来一一列举

2|01.场景。

　　场景是什么，说得简单一点，场景就是一个canvas ,我们就是要在Canvas上面实现3D效果的画面而已。场景和容器，相机是息息相关的，我们就拿拍戏来说，假如我们需要演一个古装剧的撕逼场景，那么，我们需要的道具其中之一就是一个相机。

3|02.容器

　　就是承载球体的DIV，比如我们要演戏，那么演戏的场地，比如某个山清水秀的地方。

4|03.相机

　　简单一点说，就是你从屏幕里面看这个球体的样子，说得不太明白？其实很简单，你想一下你在玩生化危机的时候的，是不是第一人称？那么你看到的不同的怪物，以不同的视角去看的话，那么得到的结果，就会有差异，这个就是相机的作用。

5|04.演员(这里指的是球体)

　　这个就太容易了，不过以后我提到的可不一定是球体哦，也许是正方体，也许是一个复杂的形状都有可能，THREE.JS提供了很多的“库”，这些库可以绘制出不同的形状的物体，对于初学者来说，理解这些就足够了。

6|0代码

　　代码不是特别的复杂，大家理解的话可以按照层级关系来理解，比如场景里面添加相机什么的，反正就是一层一层的套，英语的话有一些专有词汇，

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<div id="container"></div>   <script>     //设置场景的大小     var width = 400;     var height = 300;       //设置相机的一些参数。     var view_angle = 45;     aspect = width / height;     near = 0.1;     far = 10000;       //设置容器     var $container = $("#container");       //新建一个WebGL 渲染，以及相机     var renderer = new THREE.WebGLRenderer();     var camera =         new THREE.PerspectiveCamera(         view_angle, aspect, near, far         );     var scene = new THREE.Scene();       //把相机添加到场景里面     scene.add(camera);       camera.position.z = 300;       renderer.setSize(width, height);       //附加DOM元素     $container.append(renderer.domElement);       //设置球体的值     var radius = 50, segemnt = 16, rings = 16;       var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });       var sphere = new THREE.Mesh(         new THREE.SphereGeometry(radius,segemnt,rings),         sphereMaterial         );       sphere.geometry.verticesNeedUpdate = true;     sphere.geometry.normalsNeedUpdate = true;       scene.add(sphere);       var pointLight = new THREE.PointLight(0XFFFFFF);       pointLight.position.x = 10;     pointLight.position.y = 50;     pointLight.position.z = 150;       scene.add(pointLight);             //画图     renderer.render(scene, camera);   </script>

　　

7|0最终效果

　　由于我也是初学者，所以给大家的帮助也很有限，不过我会努力的，经常把自己学习Three.js的一些心得分享出来，共勉之！

__EOF__

作　　者：ღKawaii
出　　处：https://www.cnblogs.com/kmsfan/p/three_js_hello_world.html
关于博主：一个普通的小码农，为了梦想奋斗
版权声明：署名 - 非商业性使用 - 禁止演绎，协议普通文本 | 协议法律文本。
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！