three - 4 - threejs提供的内置几何体
认识three.js 提供的内置几何体
three.js 的内置几何体大致可分成以下几类:
- 二维几何体
- PlaneGeometry 矩形平面
- CircleGeometry 圆形平面
- RingGeometry 圆环平面
- ShapeGeometry 二维图形
- 三维几何体
- BoxGeometry 立方体
- TetrahedronGeometry 四面体
- OctahedronGeometry 八面体
- DodecahedronGeometry 十二面体
- IcosahedronGeometry 二十面体
- PolyhedronGeometry 多面体
- SphereGeometry 球体
- ConeGeometry 圆锥
- CylinderGeometry 圆柱
- TorusGeometry 三维圆环
- TorusKnotGeometry 扭结
- 路径合成几何体
- TubeGeometry 管道
- LatheGeometry 车削
- ExtrudeGeometry 挤压
- 线性几何体
- WireframeGeometry 网格几何体
- EdgesGeometry 边缘几何体
二维几何体
PlaneGeometry 矩形平面
如图:
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
- width — 平面沿着X轴的宽度。默认值是1。
- height — 平面沿着Y轴的高度。默认值是1。
- widthSegments — (可选)平面的宽度分段数,默认值是1。
- heightSegments — (可选)平面的高度分段数,默认值是1。
代码:
- 建立一个Stage对象,把渲染器、场景、相机、轨道控制器和响应式布局都封装进去。这样在写例子的时候会比较方便、整洁。
- src/component/Stage.ts
import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";export default class Stage {// 渲染器renderer: WebGLRenderer;// 场景scene: Scene;// 相机camera: PerspectiveCamera;// 轨道控制器controls: OrbitControls;// 渲染之前beforeRender = (time: number = 0) => {};// 初始化场景constructor(x: number = 0, y: number = 0, z: number = 12) {this.scene = new Scene();// antialias:抗锯齿,渲染出来的图像没有小锯齿,但是同时渲染效率变低了。默认为falsethis.renderer = new WebGLRenderer({ antialias: true });// 设置canvas画布的像素尺寸,同时还做了自适应尺寸。const { clientWidth, clientHeight } = this.renderer.domElement;this.renderer.setSize(clientWidth * window.devicePixelRatio, window.clientHeight * devicePixelRatio, false);// 设置相机视口的宽高比this.camera = new PerspectiveCamera(45, clientWidth / clientHeight, 0.1, 1000);// 设置相机的位置this.camera.position.set(x, y, z);// 相机看向0, 0, 0点位置this.camera.lookAt(0, 0, 0);// 设置轨道控制器this.controls = new OrbitControls(this.camera, this.renderer.domElement);}// 响应式布局responsive() {const { renderer, camera } = this;if (this.resizeRendererToDisplaySize(renderer)) {const { clientWidth, clientHeight } = renderer.domElement;camera.aspect = clientWidth / clientHeight;// 更新投影矩阵camera.updateProjectionMatrix();}}// 重置渲染尺寸resizeRendererToDisplaySize(renderer: WebGLRenderer): boolean {const { width, height, clientWidth, clientHeight } = renderer.domElement;const [w, h] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];const needResize = width !== w || height !== h;if (needResize) {renderer.setSize(w, h, false);}return needResize;}// 连续渲染animate(time = 0) {this.responsive();this.beforeRender(time);this.renderer.render(this.scene, this.camera);requestAnimationFrame((time) => {this.animate(time);});}
}
绘制矩形平面:
src/component/Plane.ts
import React, { useRef, useEffect } from "react";
import {Mesh,MeshBasicMaterial,MeshNormalMaterial,PlaneGeometry,
} from "three";
import Stage from "../component/Stage";
import "./fullScreen.css";// 实例化Stage对象
const stage = new Stage();
const { scene, renderer } = stage;// PlaneGeometry:矩形平面
// 第一个参数:矩行面的画宽度,
// 第二个参数:矩形面的高度
// 第三个参数:宽方向的分段数量
// 第四个参数:高方向的分段数量
const geometry = new PlaneGeometry(0.5, 2, 2, 4);// 圆形平面
const geometry = new CircleGeometry(0.5, 16, Math.PI / 2, Math.PI / 3);// 圆环平面
const geometry = new RingGeometry(0.3, 0.6, 12, 2, Math.PI / 6, Math.PI / 2);// 二维图像
var shape = new Shape()
shape.moveTo(0, 0)
// 设置贝赛尔曲线
shape.bezierCurveTo(1, 1, -1, 1, 0, 0)
const geometry = new ShapeGeometry(shape, 6){// 法线材质const material = new MeshNormalMaterial({polygonOffset: true,polygonOffsetFactor: 1,polygonOffsetUnits: 1,});const mesh = new Mesh(geometry, material);scene.add(mesh);
}
{// 基础材质:不受光度影响const material = new MeshBasicMaterial({wireframe: true,});const mesh = new Mesh(geometry, material);scene.add(mesh);
}const Plane: React.FC = (): JSX.Element => {const divRef = useRef<HTMLDivElement>(null);useEffect(() => {const { current } = divRef;if (current) {current.innerHTML = "";current.append(renderer.domElement);stage.animate();}}, []);return <div ref={divRef} className="canvasWrapper"></div>;
};export default Plane;
如图:
圆形平面
如图:
CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
- radius — 圆形的半径,默认值为1
- segments — 分段(三角面)的数量,最小值为3,默认值为8。
- thetaStart — 第一个分段的起始角度,默认为0。(three o’clock position)
- thetaLength — 圆形扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆。
圆环平面
如图:
RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
- innerRadius — 内部半径,默认值为0.5。
- outerRadius — 外部半径,默认值为1。
- thetaSegments — 圆环的分段数。这个值越大,圆环就越圆。最小值为3,默认值为8。
- phiSegments — 最小值为1,默认值为8。
- thetaStart — 起始角度,默认值为0。
- thetaLength — 圆心角,默认值为Math.PI * 2。
二维图形:使用路径画图像
ShapeGeometry(shapes : Array, curveSegments : Integer)
- shapes — 一个单独的shape,或者一个包含形状的Array。
- curveSegments - Integer - 每一个形状的分段数,默认值为12。
代码示例:
const shape = new Shape();
// 设置起点
shape.moveTo(0, 0);// 设置贝赛尔曲线
shape.bezierCurveTo(
// 控制点1
1, 1,
// 控制点2
-1, 1,
// 结束点
0, 0);// 第一个参数:图形
// 第二个参数: 设置分段
const geometry = new ShapeGeometry(shape, 6);
如图:
三维几何体
BoxGeometry立方体
如图:
BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
- width — X轴上面的宽度,默认值为1。
- height — Y轴上面的高度,默认值为1。
- depth — Z轴上面的深度,默认值为1。
- widthSegments — (可选)宽度的分段数,默认值是1。
- heightSegments — (可选)高度的分段数,默认值是1。
- depthSegments — (可选)深度的分段数,默认值是1。
四面体
如图:
TetrahedronGeometry(radius : Float, detail : Integer)
- radius — 四面体的半径,默认值为1。
- detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点,使其不再是一个四面体。
八面体
如图:
OctahedronGeometry(radius : Float, detail : Integer)
- radius — 八面体的半径,默认值为1。
- detail — 默认值为0,将这个值设为一个大于0的数将会为它增加一些顶点,使其不再是一个八面体。
12面体
如图:
DodecahedronGeometry(radius : Float, detail : Integer)
- radius — 十二面体的半径,默认值为1。
- detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点,使其不再是一个十二面体。
20面体
如图:
- radius — 二十面体的半径,默认为1。
- detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点,使其不再是一个二十面体。当这个值大于1的时候,实际上它将变成一个球体。
多面体:可以定义不同面数的多面体
PolyhedronGeometry(vertices : Array, indices : Array, radius : Float, detail : Integer
- vertices — 一个顶点Array(数组):[1,1,1, -1,-1,-1, … ]。
- indices — 一个构成面的索引Array(数组), [0,1,2, 2,3,0, … ]。
- radius — Float - 最终形状的半径。
- detail — Integer - 将对这个几何体细分多少个级别。细节越多,形状就越平滑。
案例:
const geometry = new PolyhedronGeometry([-1, -1, -1, 1, -1, -1, 1, 1, -1, -1, 1, -1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1],[2, 1, 0, 0, 3, 2, 0, 4, 7, 7, 3, 0, 0, 1, 5, 5, 4, 0, 1, 2, 6, 6, 5, 1, 2, 3, 7, 7, 6, 2, 4, 5, 6, 6, 7, 4], // 顶点索引1, // 半径1 // 分段
);
渲染效果如下:
球体
如图:
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
- radius — 球体半径,默认为1。
- widthSegments — 水平分段数(沿着经线分段),最小值为3,默认值为32。
- heightSegments — 垂直分段数(沿着纬线分段),最小值为2,默认值为16。
- phiStart — 指定水平(经线)起始角度,默认值为0。。
- phiLength — 指定水平(经线)扫描角度的大小,默认值为 Math.PI * 2。
- thetaStart — 指定垂直(纬线)起始角度,默认值为0。
- thetaLength — 指定垂直(纬线)扫描角度大小,默认值为 Math.PI。
该几何体是通过扫描并计算围绕着Y轴(水平扫描)和X轴(垂直扫描)的顶点来创建的。
因此,我们可以通过为phiStart,phiLength,thetaStart和thetaLength属性对球体进行切片。
圆锥
如图:
ConeGeometry(radius : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
- radius — 圆锥底部的半径,默认值为1。
- height — 圆锥的高度,默认值为1。
- radialSegments — 圆锥侧面周围的分段数,默认为8。
- heightSegments — 圆锥侧面沿着其高度的分段数,默认值为1。
- openEnded — 一个Boolean值,指明该圆锥的底面是开放的还是封顶的。默认值为false,即其底面默认是封顶的。
- thetaStart — 第一个分段的起始角度,默认为0。(three o’clock position)
- thetaLength — 圆锥底面圆扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆锥。
圆柱
如图:
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
- radiusTop — 圆柱的顶部半径,默认值是1。
- radiusBottom — 圆柱的底部半径,默认值是1。
- height — 圆柱的高度,默认值是1。
- radialSegments — 圆柱侧面周围的分段数,默认为8。
- heightSegments — 圆柱侧面沿着其高度的分段数,默认值为1。
- openEnded — 一个Boolean值,表示该圆柱的底面和顶面是否开放。默认值为false,即闭合。
- thetaStart — 第一个分段的起始角度,默认为0。(three o’clock position)
- thetaLength — 圆柱底面圆扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆柱。
三维圆环
如图:
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
- radius - 环面的半径,从环面的中心到管道横截面的中心。默认值是1。
- tube — 管道的半径,默认值为0.4。
- radialSegments — 管道横截面的分段数,默认值为8。
- tubularSegments —圆环x的分段数,默认值为6。
- arc — 圆环的圆心角(单位是弧度),默认值为Math.PI * 2。
纽结
如图:
TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)
radius - 圆环的半径,默认值为1。
tube - 管道的半径,默认值为0.4。
tubularSegments - 扭结线的分段数量,默认值为64。
radialSegments - 管道分段数量,默认值为8。
p - 这个值决定了几何体将绕着其旋转对称轴旋转多少次,默认值是2。
q - 这个值决定了几何体将绕着其内部圆环旋转多少次,默认值是3。
路径合成几何体
TubeGeometry 管道
TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
- path — Curve - 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.
- tubularSegments — Integer - 组成这一管道的分段数,默认值为64。
- radius — Float - 管道的半径,默认值为1。
- radialSegments — Integer - 管道横截面的分段数目,默认值为8。
- closed — Boolean 管道的两端是否闭合,默认值为false。
代码示例:
// Curve:顶点类型Vector3
import {.Curve, Vector3 } from 'three'class CustomSinCurve extends Curve<Vector3> {constructor() {super();}// t:就是0-1之间的差值getPoint(t: number, optionalTarget: Vector3 = new Vector3()) {设置管道弯曲的x,y,zconst tx = t;const ty = Math.cos(8 * Math.PI * t) / 8;const tz = Math.sin(8 * Math.PI * t) / 8;return optionalTarget.set(tx, ty, tz);}
}const path = new CustomSinCurve();
const geometry = new TubeGeometry(path, 64, 0.05, 8);
如图:
LatheGeometry 车削:
原理:其实就是让一条曲线沿着y轴线旋转。
LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)
// Vector2顶点集合
- points — 一个Vector2对象数组。每个点的X坐标必须大于0。
- segments — 要生成的车削几何体圆周分段的数量,默认值是12。
- phiStart — 以弧度表示的起始角度,默认值为0。
- phiLength — 车削部分的弧度(0-2PI)范围,2PI将是一个完全闭合的、完整的车削几何体,小于2PI是部分的车削。默认值是2PI。
代码示例:
// 创建顶点集合
const points = [];
for (let i = 0; i < 1; i += 0.1) {// 画曲线const x = (Math.sin(i * Math.PI * 1.8 + 3) + 1) / 5 + 0.02;points.push(new Vector2(x, i));
}
const geometry = new LatheGeometry(points, 32, 0, Math.pI);
如图:
ExtrudeGeometry 挤压几何体
ExtrudeGeometry(shapes : Array, options : Object)
- shapes — 形状或者一个包含形状的数组。
- options — 一个包含有下列参数的对象:对物体挤压的设置
- steps — int,用于沿着挤出样条的深度细分的点的数量,默认值为1。
- depth — float,挤出的形状的深度,默认值为1。
- bevelEnabled — bool,对挤出的形状应用是否斜角,默认值为true。
- bevelThickness — float,设置原始形状上斜角的厚度。默认值为0.2。
- bevelSize — float。斜角与原始形状轮廓之间的延伸距离,默认值为bevelThickness-0.1。
- bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.
- bevelSegments — int。斜角的分段层数,默认值为3。
- extrudePath — THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.
- UVGenerator — Object。提供了UV生成器函数的对象。
该对象可以将一个二维形状挤成一个三维几何体。
当使用这个几何体创建Mesh的时候,如果你希望分别对它的表面和它挤出的侧面使用单独的材质,你可以使用一个材质数组。 第一个材质将用于其表面;第二个材质则将用于其挤压出的侧面。
代码示例:
const shape = new Shape();
// 画线
// 开始点
shape.moveTo(0, 0);
shape.lineTo(0, 1);
shape.lineTo(1, 1);
shape.lineTo(1, 0);
/ 结束点
shape.lineTo(0, 0);const extrudeSettings = {steps: 1,depth: 1,bevelEnabled: true,bevelThickness: 0.2,bevelSize: 0.1,bevelOffset: 0,bevelSegments: 1,
};const geometry = new ExtrudeGeometry(shape, extrudeSettings);
线性几何体
线性几何体其实就是用线显示几何体的方式。
网格几何体
网格几何体:把网格中三角面用三角线来显示。
如图所示:
WireframeGeometry( geometry : BufferGeometry )
- geometry — 任意几何体对象。
代码示例:
var geometry = new SphereGeometry()
const wireframe = new WireframeGeometry(geometry)
const line = new LineSegments(wireframe);
scene.add(line)// 设置材质
const mat = line.material as LineBasicMaterial
// 设置颜色
mat.color=new Color(oxffff00)mat.depthTest = false;// 设置透明度
mat.transparent = true;
mat.opacity = 0.5;
边缘几何体
边缘几何体和网格几何体差不多,但是 边缘几何体的线会少一些。当两个面的法向量长度差不多时,会把2个面重合的那条边删掉。
如下图:当2个三角将要重合的那条边将要达到一个阈值时,会被删掉。
EdgesGeometry( geometry : BufferGeometry, thresholdAngle : Integer )
- geometry — 任何一个几何体对象。
- thresholdAngle — 仅当相邻面的法线之间的角度(单位为角度)超过这个值时,才会渲染边缘。默认值为1。
代码示例:
// 球体
const geometry = new SphereGeometry(2, 8, 8);
// 设置边缘几何体
const edges = new EdgesGeometry(geometry);
const line = new LineSegments(edges);
如图所示:
自定义几何体
three - 4 - threejs提供的内置几何体相关推荐
- Hibernate提供的内置标识符生成器
Hibernate提供的内置标识符生成器 Java语言按内存地址来识别或区分同一个类的不同对象,而关系数据库按主键来识别或区分同一个表的不同记录.Hibernate使用OID(对象标识符)来统一两者之 ...
- python提供的内置函数有哪些_python内置函数介绍
内置函数,一般都是因为使用频率比较频繁,所以通过内置函数的形式提供出来.对内置函数通过分类分析,基本的数据操作有数学运算.逻辑操作.集合操作.字符串操作等. 说起我正式了解内置函数之前,接触到的是la ...
- 【Groovy】Gradle 构建工具 ( 自动下载并配置构建环境 | 提供 API 扩展与开发工具集成 | 内置 Maven 和 Ivy 依赖管理 | 使用 Groovy 编写构建脚本 )
文章目录 一.Gradle 自动下载并配置构建环境 二.Gradle 提供 API 扩展与开发工具集成 三.Gradle 内置 Maven 和 Ivy 依赖管理 四.Gradle 使用 Groovy ...
- Asp.net 内置对象
(1)简述ASP.NET内置对象. 答:ASP.NET提供了内置对象有Page.Request.Response.Application.Session.Server.Mail和Cookies.这些对 ...
- Python 2.7 学习笔记 内置语句、函数、标准库
使用任何开发语言进行软件开发,都离不开语言提供的内置库(或Api),甚至说内置库的强大及使用是否方便都会影响大家对开发语言的选择. python语言,一样提供了很多内置的功能,可供开发时使用.主要有如 ...
- SQLite学习手册(内置函数)
一.聚合函数: SQLite中支持的聚合函数在很多其他的关系型数据库中也同样支持,因此我们这里将只是给出每个聚集函数的简要说明,而不在给出更多的示例了.这里还需要进一步说明的是,对于所有聚合函数而言, ...
- Python全栈之路系列----之-----内置函数和匿名函数lamdba
引子 什么是内置函数? 内置函数就是python 提供给我们直接拿来就可以用的函数 内置函数--内置命名空间 只管调用 不管实现 总共68个 def func(): == #这是自己定义的函数 ...
- Hive内置运算函数,自定义函数(UDF)和Transform
4.Hive函数 4.1 内置运算符 内容较多,见<Hive官方文档> 4.2 内置函数 内容较多,见<Hive官方文档> https://cwiki.apache.org ...
- Hive基本操作,DDL操作(创建表,修改表,显示命令),DML操作(Load Insert Select),Hive Join,Hive Shell参数(内置运算符、内置函数)等
1. Hive基本操作 1.1DDL操作 1.1.1 创建表 建表语法 CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_nam ...
最新文章
- 关于CSDN不给任何通知强制关闭我的6年博客,我深表痛心
- 浏览器会缓存js文件
- 雷军的最后一次 重 大 创 业
- springboot jpa 复合主键 联合主键
- android获取导航栏宽高,Android获取屏幕的宽高度、状态栏、标题栏、导航栏、编辑区域高度...
- 好的产品经理是怎样炼成的?
- ACM PKU 2299 Ultra-QuickSort
- 从 ReactiveCocoa 中能学到什么?不用此库也能学以致用
- 2021-08-12
- sudo echo x **.** 时 base: : Permission denied
- 操作系统:进程同步与互斥之生产者-消费者问题(含报告和源码)
- C/C++面试宝典2022版(最新版)
- 计算机中word音乐符号在哪里找,word音乐符号怎么打出来|word音乐符号怎么打
- 企业为什么要做微信公众号?
- mysql commit用法_sql commit用法
- matlab 误差椭圆,第十章 误差椭圆.doc
- HTTPClient模拟登陆开心网001
- 【C语言】----找出100以内的所有质数(素数),并且输出前十个
- 刷APP任务平台可靠吗?
- 【Java锁体系】ReadWriteLock读写锁是什么?什么是读写锁
热门文章
- 批处理中Copy与Xcopy的区别
- CGColor UIColor
- 文件后缀名(项目与编译环境经验记录1)
- execution(* com.sample.service.impl..*.*(..))
- linux kdump保存的目录,Linux kdump
- inprivate浏览是什么意思_InPrivate浏览是什么?怎么用?
- 2016全球与中国市场智能煤气表深度研究报告
- mac tmp文件夹在哪?
- 计算机配置的说明,如何选择计算机配置选择计算机配置方法[详细说明]
- C++ 四种数据交换的函数