three.js 几何体(一)
我的个人博客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。接下来的几篇我将详细的介绍这些几何体的使用以及注意事项。
转载请注明地址:郭先生的博客
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?