封面图
从这一小节开始,文中的代码及图片将逐渐多起来,以方便的描述相关的知识点。
Geometry翻译成中文为:几何图形、几何结构。顾名思义,它可以是长方体、立方体、圆柱体、圆锥体、一个平面、球体、环形等等一些列的形状和结构。
BoxGeometry
BoxGeometry翻译过来为:长方体几何体。但他不限于仅仅生成长方体,我们可以动态的改变它的长、宽、高,来达到我们想要的效果。
它的使用方式为:
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
BoxGeometry接收以下参数:
- width-宽度;即平行于X轴的边缘的长度。可选择的默认为1。
- height——高度;即平行于Y轴的边缘的长度。可选择的默认为1。
- depth——深度;即平行于Z轴的边缘的长度。可选择的默认为1。
- widthSegments-沿边的宽度分段的矩形面的数量。可选择的默认为1。
- heightSegments-沿边的高度分段的矩形面的数量。可选择的默认为1。
- depthSegments-沿边的深度分段的矩形面的数量。可选择的默认为1。
CapsuleGeometry
胶囊几何体,它有两个比较重要的属性:半径和长度。
CapsuleGeometry构造器接收以下参数:
- radius—胶囊的半径。可选择的默认为1。
- length—中间部分的长度。可选择的默认为1。
- capSegments—用于构建封口的曲线段数。可选择的默认为4。
- radialSegments-胶囊圆周周围的分段面数。可选择的默认为8。
它的使用方式也非常简单:
const geometry = new THREE.CapsuleGeometry( 1, 1, 4, 8 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const capsule = new THREE.Mesh( geometry, material );
scene.add( capsule );
CircleGeometry
CircleGeometry是欧几里得几何的一个简单形状。它由多个三角形线段构成,这些线段围绕中心点定向,并延伸到给定的半径。它是从一个起始角度和一个给定的中心角度逆时针构建的。它也可以用于创建规则多边形,其中线段的数量决定边的数量。
CircleGeometry构造器接收以下参数:
- radius-圆的半径,默认值为1。
- segments-线段数(三角形),最小值=3,默认值=32。
- thetaStart-第一段的起始角度,默认值为0(三点钟位置)。
- θ长度-圆形扇形的中心角,通常称为θ。默认值为2*Pi,表示一个完整的圆。
我们在使用它的时候需要注意角度和弧度的转化:2*Pi=360度。
它的使用方式如下:
const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );
ConeGeometry
圆锥体。根据我们之前学过的知识,我们可以推断出它的构造器至少要接收以下两个参数:
- 底面半径
- 高度
但实际上它接收的参数不止两个,看下图:
除了半径和高度之外,它还接收以下参数:
- radialSegments-圆锥体圆周周围的分段面数。默认值为32
- heightSegments-沿圆锥体高度的面行数。默认值为1。
- openEnded-一个布尔值,指示圆锥体的底部是开放的还是有盖的。默认值为false,表示上限。
- thetaStart-第一段的起始角度,默认值为0(三点钟位置)。
- θ长度-圆形扇形的中心角,通常称为θ。默认值为2*Pi,这将形成一个完整的圆锥体。
它的使用方式如下:
const geometry = new THREE.ConeGeometry( 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cone = new THREE.Mesh(geometry, material );
scene.add( cone );
CylinderGeometry
圆柱体。
圆锥体实际上是顶面半径为0的圆柱体。所以我们可以推测圆柱体的构造器和圆锥体有着基本一致的参数:半径、高度、底面是否开放、角度等。
而实际上也确实如此,圆柱体的构造器所接受的参数如下 :
- radiusTop-顶部圆柱体的半径。默认值为1。
- radiusBottom—底部圆柱体的半径。默认值为1。
- height—圆柱体的高度。默认值为1。
- radialSegments-圆柱体圆周周围的分段面数。默认值为32
- heightSegments-沿圆柱体高度的面行数。默认值为1。
- openEnded-一个布尔值,指示圆柱体的末端是打开的还是有盖的。默认值为false,表示上限。
- thetaStart-第一段的起始角度,默认值为0(三点钟位置)。
- θ长度-圆形扇形的中心角,通常称为θ。默认值为2*Pi,表示一个完整的圆柱体。
它的使用方式如下:
const geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );