three.js 几何体（一）

这篇郭先生来说一说three.js几何体都有哪些？在线案例点击预览three.js 几何体

1. 了解各种three.js几何体

下面是three.js几何体的分类介绍以及构造器的参数（r117版本）

|名称|构造器参数|

|-|-|-|

|PlaneGeometry（平面几何体）|width — 平面沿着X轴的宽度。默认值是1。height — 平面沿着Y轴的高度。默认值是1。widthSegments — （可选）平面的宽度分段数，默认值是1。heightSegments — （可选）平面的高度分段数，默认值是1。|

|CircleGeometry（圆形几何体）|radius — 圆形的半径，默认值为1segments — 分段（三角面）的数量，最小值为3，默认值为8。thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。|

|RingGeometry（环形几何体）|innerRadius — 内部半径，默认值为0.5。outerRadius — 外部半径，默认值为1。thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为8。phiSegments — 最小值为1，默认值为8。thetaStart — 起始角度，默认值为0。thetaLength — 圆心角，默认值为Math.PI * 2。|

|ShapeGeometry（形状几何体）|shapes — 一个单独的shape，或者一个包含形状的Array。curveSegments - Integer - 每一个形状的分段数，默认值为12。|

|BoxGeometry（立方几何体）|width — X轴上面的宽度，默认值为1。height — Y轴上面的高度，默认值为1。depth — Z轴上面的深度，默认值为1。widthSegments — （可选）宽度的分段数，默认值是1。heightSegments — （可选）宽度的分段数，默认值是1。depthSegments — （可选）宽度的分段数，默认值是1。|

|SphereGeometry（球几何体）|radius — 球体半径，默认为1。widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为8。heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为6。phiStart — 指定水平（经线）起始角度，默认值为0。phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。thetaStart — 指定垂直（纬线）起始角度，默认值为0。thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。|

|CylinderGeometry（圆柱几何体）|radiusTop — 圆柱的顶部半径，默认值是1。radiusBottom — 圆柱的底部半径，默认值是1。height — 圆柱的高度，默认值是1。radialSegments — 圆柱侧面周围的分段数，默认为8。heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。|

|ConeGeometry（圆锥几何体）|radius — 圆锥底部的半径，默认值为1。height — 圆锥的高度，默认值为1。radialSegments — 圆锥侧面周围的分段数，默认为8。heightSegments — 圆锥侧面沿着其高度的分段数，默认值为1。openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。hetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）thetaLength — 圆锥底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。|

|TorusGeometry（圆环几何体）|radius - 圆环的半径，从圆环的中心到管道（横截面）的中心。默认值是1。tube — 管道的半径，默认值为0.4。radialSegments — 圆环的分段数，默认值为8。tubularSegments — 管道的分段数，默认值为6。arc — 圆环的中心角（单位是弧度），默认值为Math.PI * 2。|

|TextGeometry（文本几何体）|font — THREE.Font的实例。size — Float。字体大小，默认值为100。height — Float。挤出文本的厚度。默认值为50。curveSegments — Integer。（表示文本的）曲线上点的数量。默认值为12。bevelEnabled — Boolean。是否开启斜角，默认为false。bevelThickness — Float。文本上斜角的深度，默认值为20。bevelSize — Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。bevelSegments — Integer。斜角的分段数。默认值为3。|

|TetrahedronGeometry（四面几何体）|radius — 四面体的半径，默认值为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。|

|OctahedronGeometry（八面几何体）|radius — 八面体的半径，默认值为1。detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。|

|DodecahedronGeometry（十二面几何体）|radius — 十二面体的半径，默认值为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。|

|IcosahedronGeometry（二十面几何体）|radius — 二十面体的半径，默认为1。detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。|

|TorusKnotGeometry（圆环扭结几何体）|radius - 圆环的半径，默认值为1。tube — 管道的半径，默认值为0.4。tubularSegments — 管道的分段数量，默认值为64。radialSegments — 横截面分段数量，默认值为8。p — 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。q — 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。|

|PolyhedronGeometry（多面几何体）|vertices — 一个顶点Array（数组）：1,1,1, -1,-1,-1, ... 。indices — 一个构成面的索引Array（数组）， 0,1,2, 2,3,0, ... 。radius — Float - 最终形状的半径。detail — Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。|

|TubeGeometry（管道几何体）|path — Curve - 一个由基类Curve继承而来的路径。tubularSegments — Integer - 组成这一管道的分段数，默认值为64。radius — Float - 管道的半径，默认值为1。radialSegments — Integer - 管道横截面的分段数目，默认值为8。closed — Boolean 管道的两端是否闭合，默认值为false。|

|ExtrudeGeometry（挤压几何体）|curveSegments — int，曲线上点的数量，默认值是12。steps — int，用于沿着挤出样条的深度细分的点的数量，默认值为1。depth — float，挤出的形状的深度，默认值为100。bevelEnabled — bool，对挤出的形状应用是否斜角，默认值为true。bevelThickness — float，设置原始形状上斜角的厚度。默认值为6。bevelSize — float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。bevelSegments — int。斜角的分段层数，默认值为3。extrudePath — THREE.CurvePath对象。一条沿着被挤出形状的三维样条线。UVGenerator — Object。提供了UV生成器函数的对象。|

|LatheGeometry（车削几何体）|points — 一个Vector2对象数组。每个点的X坐标必须大于0。segments — 要生成的车削几何体圆周分段的数量，默认值是12。phiStart — 以弧度表示的起始角度，默认值为0。phiLength — 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分车削。默认值是2PI。|

|ParametricGeometry（参数化几何体）|function— 该属性为一个函数，该函数以u、v值作为参数定义每个顶点的位置。需要返回THREE.Vector3的值,slices — 该属性定义u值应该分成多少份,stacks — 该属性定义v值应该分成多少份|

|Geometry（几何体）|构造函数没有任何参数。通过添加属性值得到相应几何体|

2. 几何体的介绍

现在给这些几何体进行分类。

如果按照维度分类，除了Geometry以外，前四个几何体（PlaneGeometry、CircleGeometry、RingGeometry、ShapeGeometry）都是二维几何体，剩下的都是三维的几何体

如果按照难度分类，PlaneGeometry、CircleGeometry、RingGeometry、BoxGeometry、SphereGeometry、CylinderGeometry、ConeGeometry、TorusGeometry、TetrahedronGeometry、OctahedronGeometry、DodecahedronGeometry、IcosahedronGeometry、TorusKnotGeometry属于简单几何体，剩下的都属于复杂几何体。

当然除了Geometry还有BufferGeometry，现在我们暂且不说，以后会慢慢用到。

3. 认识几何体

先上图

图片对应的就是这些几何体，如果你想更加细致的认识这些几何体请看demo。接下来的几篇我将详细的介绍这些几何体的使用以及注意事项。

转载请注明地址：郭先生的博客