我的个人博客3.x已经更新了,初学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。接下来的几篇我将详细的介绍这些几何体的使用以及注意事项。
转载请注明地址:郭先生的博客