几何体是一个很重要的东东,它描述了你所要显示的对象的结构形状,有了这个形状之后,就可以使用材质给这个形状增加外观,然后使用网格(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