three.js基础几何体:立方体,球,圆柱的绘制
作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多,因为其是基于WenGL开发的第三方库,如果延伸下去那就会没完没了,这也违背了three.js开发的初衷(为喜欢前端图形学开发,却没有良好的webgl和js基础的人群准备,使三维图形的开发变得更加容易),所以接下来就从绘制基础的几何体开始吧,结合实际例子,这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏:点击打开链接。
在开始代码实例以前,先讲讲几种几何体的代码实现方式:
(1) 平面
new THREE.PlaneGeometry(100,100,10,10)括号里的内容分别对应平面的长,宽,长方向等分量,宽方向等分量,第三第四个参数这么形容可能不太恰当,但实在找不出更恰当的形容,这里的意思是这样的,沿着长的方向将其分为10等分,沿着宽的方向将其分为10等分,参数可以根据大家的需要自己设置哈。
(2) 立方体
创建立方体的代码为:
new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);这里括号里的参数分别对应:长、宽、高、长方向等分量、宽方向等分量、高方向等分量;参数可以根据自己需要调整。
(3) 球体
创建球体的代码如下:
new THREE.SphereGeometry(16, 40, 40);括号里的参数分别对应:半径、经度、纬度;参数的大小可以按照自己的需求设置。
(4) 圆柱体
创建圆柱体的代码为:
new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40)括号里的参数分别对应:顶圆半径、底圆半径、圆柱体高度、经度、纬度;参数的大小可以根据自身需求设置。
在创建好几何体后,还需要对其进行材料属性的添加,这些在接下来的程序代码里都有注释和体现,先看看程序实现的效果图:
再看看将其设置为网格形式的效果,开启网格模式的命令为:wrieframe:true。
接下来把本例的完整程序代码附上,里面有详细的注释哈:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>threejs-basic-geometry</title> <style> body{ font-family: Monospace; background: #f0f0f0; margin: 0px; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="build/three.js"></script> <script type="text/javascript" src="js/Detector.js"></script> <script type="text/javascript"> //检测webgl的支持情况 if(!Detector.webgl) {Detector.addGetWebGLMessage();} var container; var camera, scene, renderer; main(); render(); //主函数 function main(){ //添加一个div元素 container = document.createElement('div') document.body.appendChild(container); scene = new THREE.Scene();//创建一个新场景 //添加一个透视相机 camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 1000); camera.position.set(100, 300, 100);//设置相机位置 camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点 //渲染 //antialias:true增加抗锯齿效果 renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑 renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸 //将renderer关联到container,这个过程类似于获取canvas元素 container.appendChild(renderer.domElement); //给场景添加光源 //自然光 var ambientLight = new THREE.AmbientLight( 0x606060 ); scene.add( ambientLight ); //平行光源 var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0.75, 0.5 ).normalize(); scene.add( directionalLight ); plane(); cube(); sphere(); cylinder(); } //创建一个平面 function plane(){ var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面 var planeMat = new THREE.MeshLambertMaterial({ //创建材料 color:0x666666, wireframe:false }); var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型 planeMesh.position.set(0, 0, -20);//设置平面的坐标 planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度 scene.add(planeMesh);//将平面添加到场景中 } //创建一个立方体 function cube(){ var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体 var cubeMat = new THREE.MeshLambertMaterial({//创建材料 color:0x003300, wireframe:false }); var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型 cubeMesh.position.set(20, 10, 0);//设置立方体的坐标 scene.add(cubeMesh);//将立方体添加到场景中 } //创建一个球 function sphere(){ var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体 var sphereMat = new THREE.MeshLambertMaterial({//创建材料 color:0x0000FF, wireframe:false }); var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型 sphereMesh.position.set(-25, 10, 0);//设置球的坐标 scene.add(sphereMesh);//将球体添加到场景 } //创建圆柱体 function cylinder(){ //创建圆柱体 var cylinderGeo = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40); var cylinderMat = new THREE.MeshLambertMaterial({//创建材料 color:0xFF6600, wireframe:false }); //创建圆柱体网格模型 var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat); cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标 scene.add(cylinderMesh);//向场景添加圆柱体 } //渲染 function render(){ renderer.render(scene, camera); } </script> </body> </html>
做为入门,介绍了一个three.js实例的开发,后续将继续介绍three.js里面一些基本的组件。three.js的优势在于开发相同的三维场景,代码量要比用原生webgl少的多,因为很多底层的东西和功能three.js已经封装好了,你只需要去调用即可。现在有没有觉得three.js其实不是特别难呢?