第一篇就画一个球体吧
首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的。那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地方呢?下面我就来一一列举
1.场景。
场景是什么,说得简单一点,场景就是一个canvas ,我们就是要在Canvas上面实现3D效果的画面而已。场景和容器,相机是息息相关的,我们就拿拍戏来说,假如我们需要演一个古装剧的撕逼场景,那么,我们需要的道具其中之一就是一个相机。
2.容器
就是承载球体的DIV,比如我们要演戏,那么演戏的场地,比如某个山清水秀的地方。
3.相机
简单一点说,就是你从屏幕里面看这个球体的样子,说得不太明白?其实很简单,你想一下你在玩生化危机的时候的,是不是第一人称?那么你看到的不同的怪物,以不同的视角去看的话,那么得到的结果,就会有差异,这个就是相机的作用。
4.演员(这里指的是球体)
这个就太容易了,不过以后我提到的可不一定是球体哦,也许是正方体,也许是一个复杂的形状都有可能,THREE.JS提供了很多的“库”,这些库可以绘制出不同的形状的物体,对于初学者来说,理解这些就足够了。
代码
代码不是特别的复杂,大家理解的话可以按照层级关系来理解,比如场景里面添加相机什么的,反正就是一层一层的套,英语的话有一些专有词汇,
<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>
最终效果
由于我也是初学者,所以给大家的帮助也很有限,不过我会努力的,经常把自己学习Three.js的一些心得分享出来,共勉之!