Three.js 学习记录 之 几何体

几何体是一个很重要的东东，它描述了你所要显示的对象的结构形状，有了这个形状之后，就可以使用材质给这个形状增加外观，然后使用网格（Mesh）把对象显示出来。

Three.js提供了丰富的几何体模型，今天了解几个模型，来和大家分享一下：

Three.js库中的geometry和其它大多数三维库中的一样，基本上是三位空间中的点集，以及一些将这些点连接起来的面，举例来说，一个方块有8个角，每个角都可以定义为x、y、z坐标的一个组合，所以每个方块都是三维空间中的8个点。在Three.js中，这些点称为顶点（vertice）。有六个侧面，每个角有一个顶点，每个侧面称为面（face）。

下面主要是介绍一下各个几何体的属性，属性熟悉了，就基本会用了。

 

一、THREE.Geometry

这个是一个基础类，属性如下：

id：对象id属性

name：可以为当前对象定义一个名称，初始化是空

vertices：对象顶点位置存放在这个属性中,该属性是一个数组,初始化为空数组.

colors：根据索引的顺序一对一的保存顶点颜色

faces：包含的是组成该几何体的每个面的顶点索引编号，注意：不是顶点的坐标值

faceVertexUvs：包含每个面顶点对应的纹理坐标，Uv指的是纹理贴图

morphTargets： 是一个数组，允许物体发生变形

morphColors：是一个数组，包含了morphTarget对应的颜色

morphNormals：是一个数组，包含了morphTarget对应的法线方向

skinWeight：是一个数组，用于几何体蒙皮的

skinIndices：是一个数组，用于几何体蒙皮的

boundingSphere：是一个对象，表示能够包含当前几何体的最大球体

boundingBox：是一个对象，表示能够包含当前几何体的最大立方体

hasTangents（bool型）：是否有切线

verticesNeedUpdate（bool型）：需要更新当前几何体的顶点坐标数据使用

elementsNeedUpdate（bool型）：要更新当前几何体中face顶点索引数据

uvsNeedUpdate（bool型）：需要更新当前几何体的纹理坐标数据

normalsNeedUpdate（bool型）：需要更新当前几何体的顶点法线数据

colorsNeedUpdate（bool型）：需要更新当前几何体的顶点颜色数据

tangentsNeedUpdate（bool型）：需要更新当前几何体的切线数据

 

二、THREE.PlaneGeometry

PlaneGeometry可以用来创建非常简单的二维图形，属性如下：

width：宽度

height：高度

widthSegments：指定矩形的宽度应该划分成几段

heightSegments：指定矩形的高度应该划分成几段

 

可以使用widthSegments和heightSegments属性把矩形分成多个小面，就像格子一样。

 

三、THREE.CircleGeometry

CircleGeometry可以用来创建出简单的二维圆，属性如下：

radius：半径

segments：分段，可以用来指定创建圆所用面的数量，最少3个，默认是8个，值越大，创建出的圆越光滑

thetaStart：指定从哪儿开始画圆，取值范围是0到2*Pi

thetaLength：指定圆要画多大，和thetaStart配合使用

 

四、THREE.ShapeGeometry

如果你想创建一个自定义的二维图形，你可以使用ShapeGeometry，不过这个就比较复杂一点了，需要配合使用THREE.Shape的绘图函数来完成相关效果。

 

三维几何体

 

1、CubeGeometry

主要是用来创建四方体的，只要指定宽度、高度、深度既可以创建出一个方块，参数如下：

new THREE.CubeGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

width, height, depth是必须的参数

width：宽度，沿x轴方向的长度

height：高度，沿y轴方向的长度

depth：深度，沿z轴方向的长度

widthSegments：沿x轴的方向，将面分成多少份，默认值是1

heightSegments：沿y轴的方向，将面分成多少份，默认值是1

depthSegments：沿z轴的方向，将面分成多少份，默认值是1

 

2、SphereGeometry

可以用来创建球体，new THREE.SphereGeometry()就可以创建一个默认的圆形，参数如下：

radius：半径，默认是50

widthSegments：竖直（经度）方向上的分段数，分段越多，球体的表面越光滑，默认值是8，最小值是3

heightSegments：水平（纬度）方向上的分段数，分段越多，球体的表面越光滑，默认值是8，最小值是3

phiStart：指定从x轴的什么地方开始绘制，取值是0～2*Pi，默认是0

phiLength：用来指定从phiStart开始画多少，2*Pi是个整球，0.5Pi画的是一个竖直的1/4球。换句话说，就是竖直方向画多宽，就像西瓜一样，一瓣切多大

theStart：指定从y轴的什么地方开始绘制，取值是0～2*Pi，默认是0

thetaLength：用来指定从theStart开始画多少，Pi是个整球，0.5Pi画的是一个上半球。

 

3、CylinderGeometry

可以创建圆柱和类似圆柱的物体，new THREE.CylinderGeometry()就可以创建一个默认的圆柱，参数如下：

radiusTop：设置圆柱顶部的尺寸，默认是20

radiusBottom：设置圆柱底部的尺寸，默认是20

height：设置圆柱的高度，默认是100

segmentsX：沿x轴分成多少段，默认是8，值越大圆柱越光滑

segmentsY：沿y轴分成多少段，默认是1，分段越多，面越多

openEnded：指定网格的顶部和底部是否封闭，默认是false

 

4、TorusGeometry

可以画一个圆环，像甜甜圈的那种，new THREE.TorusGeometry()就可以创建一个默认的圆环，参数如下：

这个要贴一张图，不然说不清楚：

 

radius：圆环的尺寸，就是这个圆有多大，默认是100

tube：管子的半径，就是图中彩色的那根管子，默认是40

radialSegments：沿圆环长度方向分成的段数，默认是8，看到管子上的白线没有，值越大越密

tubularSegments：沿圆环宽度方向分成的段数，默认是6，比如图中的就是6节

arc：可以控制是否绘制一个完整的圆，默认是2*Pi（完整圆环）

 

5、TorusKnotGeometry

可以创建一个环面纽结，就像绳子绕在一起一样，参数如下：

radius：圆环的尺寸，默认是100

tube：管子的半径，默认是40

radialSegments：沿圆环长度方向分成的段数，默认是8

tubularSegments：沿圆环宽度方向分成的段数，默认是6

p：定义结的形状，默认是2

q：定义结的形状，默认是3

heightScale：可以拉伸环面纽结，默认是1

 

6、PolyhedronGeometry

用来创建多面体，参数如下：

vertices：设置构成多面体的顶点

faces：指定由vertices创建的面

radius：指定多面的大小

detail：通过这个属性你可以给这个多面体添加额外的细节，如果设为1，这个多面体上的每个三角形都会分成4个小三角形，如果设为2，那么那些4个小三角形中的每一个都会继续分成个小三角形，以此类推

 

有几个现成的多面体可以使用，包括，IcosahedronGeometry（20面体），TetrahedronGeometry（正四面体），OctahedronGeometry（正八面体）