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(正八面体)

猜你喜欢

转载自xiangjinqi.iteye.com/blog/2378965