前面课程绘制了一个立方体效果,下面通过three.js的球体构造函数SphereGeometry()在三维场景中添加一个球几何体。
SphereGeometry构造函数
这个构造函数的格式是:
SphereGeometry(radius, widthSegments, heightSegments)
第一个参数radius约束的是球的大小,参数widthSegments、heightSegments约束的是球面的精度,球体你可以理解为正多面体,就像圆一样是正多边形,当分割的边足够多的时候,正多边形就会无限接近于圆,球体同样的的道理, 有兴趣可以研究利用WebGL实现它的算法,对于three.js就是查找文档看使用说明。
参 数 | 含 义 |
radius | 球体半径 |
widthSegments | 控制球面精度,水平细分数 |
heightSegments | 控制球面精度,水平细分数 |
绘制球体网格模型
使用THREE.SphereGeometry(60,40,40);替换立方体几何体代码new THREE.BoxGeometry(100, 100, 100);。
var box=new THREE.SphereGeometry(60,40,40);//创建一个球体几何对象
更多几何体
threejs除了立方体、球体还提供了很多的常见几何体的API,这里不再过多讲解,具体可以查看threejs文档,你可以在案例源码中测试下面的几何体代码。
//长方体 参数:长,宽,高 var geometry = new THREE.BoxGeometry(100, 100, 100); // 球体 参数:半径60 经纬度细分数40,40 var geometry = new THREE.SphereGeometry(60, 40, 40); // 圆柱 参数:圆柱面顶部、底部直径50,50 高度100 圆周分段数 var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 ); // 正八面体 var geometry = new THREE.OctahedronGeometry(50); // 正十二面体 var geometry = new THREE.DodecahedronGeometry(50); // 正二十面体 var geometry = new THREE.IcosahedronGeometry(50);
同时绘制多个几何体
这也比较简单,直接模仿立方体的代码就可以,需要创建一个几何体对象作和一个材质对象,然后把两个参数作为网格模型构造函数Mesh()的参数创建一个网格模型,然后再使用场景对象scene的方法.add()把网格模型mesh加入场景中。
threejs的几何体默认位于场景世界坐标的原点(0,0,0),所以绘制多个几何体的时候,主要它们的位置设置。
下面代码同时绘制了立方体、球体和圆柱三个几何体对应的网格模型。
// 立方体网格模型 var geometry1 = new THREE.BoxGeometry(100, 100, 100); var material1 = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象Material var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh scene.add(mesh1); //网格模型添加到场景中 // 球体网格模型 var geometry2 = new THREE.SphereGeometry(60, 40, 40); var material2 = new THREE.MeshLambertMaterial({ color: 0xff00ff }); var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120 scene.add(mesh2); // 圆柱网格模型 var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25); var material3 = new THREE.MeshLambertMaterial({ color: 0xffff00 }); var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120 mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0 scene.add(mesh3); //
辅助三维坐标系AxisHelper
为了方便调试预览threejs提供了一个辅助三维坐标系AxisHelper,可以直接调用THREE.AxisHelper创建一个三维坐标系,然后通过.add()方法插入到场景中即可。
// 辅助坐标系 参数250表示坐标系大小,可以根据场景大小去设置 var axisHelper = new THREE.AxisHelper(350); scene.add(axisHelper);
threejs三维坐标系老版本名称是AxisHelper,新版本名称AxesHelper。
转载本站内容时,请务必注明来自W3xue,违者必究。