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的绘图函数来完成相关效果。

今天先写到这吧，虽然内容不多，但是对于我这样一个新手来说，也折腾了好一阵子，整理的也都是很基础的东西，不过磨刀不误砍柴工，等以后越来越进步了，再给大家分享一些更实例话的东西吧。

ww