第175期:threejs中的几何体(一)

399 阅读4分钟

封面图

image.png

从这一小节开始,文中的代码及图片将逐渐多起来,以方便的描述相关的知识点。

Geometry翻译成中文为:几何图形、几何结构。顾名思义,它可以是长方体、立方体、圆柱体、圆锥体、一个平面、球体、环形等等一些列的形状和结构。

BoxGeometry

BoxGeometry翻译过来为:长方体几何体。但他不限于仅仅生成长方体,我们可以动态的改变它的长、宽、高,来达到我们想要的效果。

截屏2023-05-16 23.23.47的副本.png

它的使用方式为:

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 );