【Three.js】知识梳理三:Three.js几何体Geometry

2024-06-11 17:20

本文主要是介绍【Three.js】知识梳理三:Three.js几何体Geometry,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.什么是几何体Geometry?

在 Three.js 中,几何体(Geometry)是一个数据结构,包含了用于描述三维物体的基本信息,如顶点(vertices)、面(faces)和它们的关联属性(例如颜色、法线、纹理坐标等)。将几何体与材质(Material)相结合,我们可以创建出形状丰富、颜色各异的三维物体。

1.1缓冲类型几何体(BufferGeometry)

BufferGeometry 是 Three.js 提供的一种高效几何体表示方法,特别适用于大型场景和高性能要求的应用。与常规几何体(Geometry)相比,BufferGeometry 使用类型化数组(Typed Arrays)存储顶点、面和其他属性,可以显著减少内存占用和渲染时间。

2.几何体的主要属性

在 Three.js 中,几何体(Geometry)是一个数据结构,用于描述三维物体的基本信息。Geometry 的主要属性如下:

  1. vertices: 顶点数组,用于存储几何体的顶点。顶点是由 THREE.Vector3 对象表示的三维空间中的点,它们定义了物体的形状。
  2. faces: 面数组,用于存储几何体的面。面是由顶点组成的多边形,它们共同定义了几何体的表面。在 Three.js 中,面通常由 THREE.Face3 对象表示,表示一个由三个顶点组成的三角形。
  3. faceVertexUvs: 一个二维数组,用于存储每个面的纹理坐标。纹理坐标是每个顶点在纹理图像上的二维坐标,由 THREE.Vector2 对象表示。纹理坐标用于将纹理映射到几何体的表面。
  4. vertexNormals: 顶点法线数组。顶点法线是由 THREE.Vector3 对象表示的单位向量,指向顶点表面的法线方向。顶点法线用于光照计算和平滑着色。
  5. boundingBox: 几何体的轴对齐边界框(Axis-Aligned Bounding Box,AABB)。边界框是一个由最小和最大点组成的立方体,它紧密包围几何体。边界框用于快速剔除和碰撞检测等场景优化。
  6. boundingSphere: 几何体的包围球。包围球是一个半径最小的球体,它完全包含几何体。包围球同样用于快速剔除和碰撞检测等场景优化。
  7. colors: 顶点颜色数组。顶点颜色用于为每个顶点分配颜色值,它们可以在着色器中用于插值计算。顶点颜色由 THREE.Color 对象表示。
  8. morphTargets: 几何体的形状目标(Morph Targets)数组。形状目标是一组与原始几何体具有相同顶点数量的几何体,它们用于实现形状变形动画。

3.使用内置的几何体类型

Three.js 提供了许多内置的几何体类型。要使用内置的几何体类型,只需创建一个相应类型的实例,并将其与材质组合在一起,形成一个网格对象(Mesh)。

image-20230509153619692.png

例如,创建一个简单的立方体:

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
​
// 创建一个材质
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
​
// 创建一个网格对象
const cube = new THREE.Mesh(geometry, material);
​
// 添加到场景中
scene.add(cube);

4.创建自定义几何体

除了使用内置的几何体类型,您还可以通过组合顶点和面来创建自定义几何体。以下是一个创建自定义三角形几何体的示例:

// 创建一个空的几何体对象
const geometry = new THREE.Geometry();
​
// 定义三个顶点
const v1 = new THREE.Vector3(0, 0, 0);
const v2 = new THREE.Vector3(1, 0, 0);
const v3 = new THREE.Vector3(0, 1, 0);
​
// 将顶点添加到几何体中
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);
​
// 创建一个面,使用顶点的索引定义
const face = new THREE.Face3(0, 1, 2);
​
// 将面添加到几何体中
geometry.faces.push(face);
​
// 更新法线(这对于渲染和光照计算非常重要)
geometry.computeFaceNormals();
​
// 创建一个材质
const material = new THREE.MeshBasicMaterial({color: 0xff0000, side: THREE.DoubleSide});
​
// 创建一个网格对象
const triangle = new THREE.Mesh(geometry, material);
​
// 添加到场景中
scene.add(triangle);

5.旋转、缩放、平移、居中几何体

Three.js 提供了丰富的 API,让我们可以轻松地对几何体进行变换,这些方法本质上都是改变几何体的顶点数据。如平移、旋转和缩放等。要对网格对象进行变换,可以直接修改其 positionrotationscale 属性。例如:

5.1 缩放.scale()

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
​
// 几何体旋转、缩放或平移之后,查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);

5.2 平移.translate()

// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);

5.3 旋转.rotateX().rotateY().rotateZ()

// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);

5.4 居中.center()

geometry.translate(50, 0, 0);//偏移
// 居中:已经偏移的几何体居中,执行.center(),你可以看到几何体重新与坐标原点重合
geometry.center();

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

这篇关于【Three.js】知识梳理三:Three.js几何体Geometry的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1051807

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

sqlite3 相关知识

WAL 模式 VS 回滚模式 特性WAL 模式回滚模式(Rollback Journal)定义使用写前日志来记录变更。使用回滚日志来记录事务的所有修改。特点更高的并发性和性能;支持多读者和单写者。支持安全的事务回滚,但并发性较低。性能写入性能更好,尤其是读多写少的场景。写操作会造成较大的性能开销,尤其是在事务开始时。写入流程数据首先写入 WAL 文件,然后才从 WAL 刷新到主数据库。数据在开始

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'