Three.js拨云见雾(4)——确实存在的几何体

917 阅读5分钟

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

几何体本质上就是threejs生成顶点的算法,如果有兴趣你可以打开threejs几何体部分的源码查看threejs具体如何通过程序生成顶点位置、法线方向等顶点数据。

所有几何体的基类分为GeometryBufferGeometry)两大类,两类几何体直接可以相互转化。THREE.Geometry非常易于理解和使用。你可以直接向几何体对象添加新顶点并定义新的面,或者通过修改现有的顶点来修改现有的面。新的THREE.BufferGeometry并没有vertices和faces属性,而只有attributes以及可选的index属性。在初学者上手过程中,暂时可无须关心这两个几何体类的区别。话不多说,我们来看一下three.js中的几何体以及常见的几何体如何快速了解和使用。

image.png

二维几何体

二维几何体看上去是扁平的,它们只有两个维度。

矩形平面THREE.PlaneGeometry

PlaneGeometry对象可以用来创建一个非常简单的二维矩形,而且创建这种几何体的方式也非常简单:

let geometry = new THREE.PlaneGeometry( 5, 20, 32 ); 
let material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
let plane = new THREE.Mesh( geometry, material ); 
scene.add( plane );

构造器: PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width — 平面沿着X轴的宽度。默认值是1。
height — 平面沿着Y轴的高度。默认值是1。
widthSegments — (可选)平面的宽度分段数,默认值是1。
heightSegments — (可选)平面的高度分段数,默认值是1。

如果要在几何体创建后访问 其属性,则不能使用plane.width,而是使用.parameters属性,因此,要获取width属性,则需要通过plane.parameters.width获取。

圆形平面THREE.CircleGeometry

通过这个几何体,我们可以创建一个非常简单的二维圆或者部分圆。我们来看一下它的用法:

let geometry = new THREE.CircleGeometry( 5, 32 ); 
let material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); 
let circle = new THREE.Mesh( geometry, material ); 
scene.add( circle );

构造器:CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)

radius — 圆形的半径,默认值为1
segments — 分段(三角面)的数量,最小值为3,默认值为8。
thetaStart — 第一个分段的起始角度,默认为0。(three o'clock position)。
thetaLength — 圆形扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆。

同样的,如果在几何体创建之后访问其属性,也是需要通过parameters来获取。

小结

通过这两个的简单描述,我们可以很快的了解到在three.js中如何创建一个二维几何体以及它的简单用法。 这对我们深入了解THREE.ShapeGeometry(自定义几何体)以及THREE.RingGeometry(圆环集合体)有着很大的帮助。

三维立体几何体

立方体THREE.BoxGeometry

THREE.BoxGeometry是一个非常简单的三维几何体,只需要指定宽度、高度和深度 就可以创建一个长方体或者正方体。

let geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
let material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
let cube = new THREE.Mesh( geometry, material ); 
scene.add( cube );

构造器:BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width — X轴上面的宽度,默认值为1。
height — Y轴上面的高度,默认值为1。
depth — Z轴上面的深度,默认值为1。
widthSegments — (可选)宽度的分段数,默认值是1。
heightSegments — (可选)宽度的分段数,默认值是1。
depthSegments — (可选)宽度的分段数,默认值是1。

球体THREE.SphereGeometry

通过 SphereGeometry可以创建一个三维球体,这个几何体非常灵活,可以用来创建所有跟球体相关的几何体。

let geometry = new THREE.SphereGeometry( 5, 32, 32 ); 
let material = new THREE.MeshBasicMaterial( {color: 0xffff00} ); 
let sphere = new THREE.Mesh( geometry, material ); 
scene.add( sphere );

构造器: SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius — 球体半径,默认为1。
widthSegments — 水平分段数(沿着经线分段),最小值为3,默认值为8。
heightSegments — 垂直分段数(沿着纬线分段),最小值为2,默认值为6。
phiStart — 指定水平(经线)起始角度,默认值为0。。
phiLength — 指定水平(经线)扫描角度的大小,默认值为 Math.PI * 2。
thetaStart — 指定垂直(纬线)起始角度,默认值为0。
thetaLength — 指定垂直(纬线)扫描角度大小,默认值为 Math.PI。

该几何体是通过扫描并计算围绕着Y轴(水平扫描)和X轴(垂直扫描)的顶点来创建的。 因此,不完整的球体(类似球形切片)可以通过为phiStart,phiLength,thetaStart和thetaLength设置不同的值来创建, 以定义我们开始(或结束)计算这些顶点的起点(或终点)。

小结

通过两个简单的立体几何体来带大家了解三维几何体在three.js如何使用的。了解如何使用之后,我们就可以深入的学习一些比较复杂的几何体,例如正多边体的几何体,THREE.TorusGeometry甜甜圈等比较灵活的立体几何,当然,灵活的使用在于开发者对它有深入的了解才知道如何使用,对开发者的能力要求也是比较高的。

总结

今天我们简单学习了几个three.js提供的标准几何体。在three.js中,很多的几何体都是可以开箱即用的,我们在使用的过程中,可以选择一种简单的材质,不要直接使用那些复杂的材质,便于我们深入了解学习几何体的真实形状。