这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战
几何体本质上就是threejs生成顶点的算法,如果有兴趣你可以打开threejs几何体部分的源码查看threejs具体如何通过程序生成顶点位置、法线方向等顶点数据。
所有几何体的基类分为Geometry
和BufferGeometry
)两大类,两类几何体直接可以相互转化。THREE.Geometry
非常易于理解和使用。你可以直接向几何体对象添加新顶点并定义新的面,或者通过修改现有的顶点来修改现有的面。新的THREE.BufferGeometry
并没有vertices和faces属性,而只有attributes以及可选的index属性。在初学者上手过程中,暂时可无须关心这两个几何体类的区别。话不多说,我们来看一下three.js
中的几何体以及常见的几何体如何快速了解和使用。
二维几何体
二维几何体看上去是扁平的,它们只有两个维度。
矩形平面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
中,很多的几何体都是可以开箱即用的,我们在使用的过程中,可以选择一种简单的材质,不要直接使用那些复杂的材质,便于我们深入了解学习几何体的真实形状。