自定义函数生成顶点数据
几何体的顶点数据可以手动自定义,自然也可以使用for循环语句批量生成,只需要设置好生成顶点数据的规则即可。 比如第一章中接触到的球体几何体的构造函数就是一个生成球体几何体的顶点数据的函数,具体的程序细节已经被three.js引擎封装, 为了大家能够更深刻的理解,本节课通过一个正n多边形的案例来展示如何利用程序生成顶点数据。

几何体的顶点数据可以手动自定义,自然也可以使用for循环语句批量生成,只需要设置好生成顶点数据的规则即可。 比如第一章中接触到的球体几何体的构造函数就是一个生成球体几何体的顶点数据的函数,具体的程序细节已经被three.js引擎封装, 为了大家能够更深刻的理解,本节课通过一个正n多边形的案例来展示如何利用程序生成顶点数据。
正n多边形顶点生成函数
/** * 正n边形顶点数据创建函数 */ function fun(r,n) {//r表示圆周半径,n表示正多边形边数 var arr = [];//几何体顶点数组 for (var i = 0;i < n;i++){ angle=2*Math.PI/n*i;//两个顶点与几何中心构成的角度 x = r*Math.cos(angle);//计算横坐标 y = r*Math.sin(angle);//计算纵坐标 arr.push(new THREE.Vector3(x,y,0)) } return arr;
正五边形绘制
/** * 创建线条对象 */ var geometry = new THREE.Geometry();//声明一个空几何体对象 geometry.vertices = fun(100,5);//顶点所在半径100,正五边形 var material=new THREE.LineBasicMaterial({ color:0x0000ff //线条颜色 });//材质对象 var line=new THREE.LineLoop(geometry,material);//线条模型对象 scene.add(line);//线条对象添加到场景中
正50边形(圆弧)
计算机的世界都是离散的非连续的,绘制圆弧实际上是利用正多边形模拟,至于用正几边形模拟圆弧,要根据需要设置,边数越多,精度和显示效果越好,耗费的自计算机资源更多, 边数越少,显示效果越差,耗费的计算机资源越少。

geometry.vertices = fun(100,50);//顶点所在半径100,正50边形