学习threejs，将多个网格合并成一个网格

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.Geometry 几何体
    • 1.2 为什么将多个网格合并成一个网格
  • 二、🍀将多个网格合并成一个网格
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中将多个网格合并成一个网格，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Geometry 几何体

THREE.Geometry对原生WebGL中的顶点位置position、顶点法向量normal、顶点颜色color、顶点纹理坐标uv、顶点索引index等顶点数据进行了封装。利用 Vector3 或 Color 存储了几何体的相关 attributes（如顶点位置，面信息，颜色等）比起 BufferGeometry 更容易读写，但是运行效率不如有类型的队列。
构造函数：
Geometry() 构造函数没有任何参数。
属性：
boundingBox：Geometry 的外边界矩形，可以通过 .computeBoundingBox() 进行计算，默认值是 null。
boundingSphere：Geometry 的外边界球形，可以通过 .computeBoundingSphere() 进行计算，默认值是 null。
colors：顶点 colors 队列，与顶点数量和顺序保持一致。该属性用于 Points 、 Line 或派生自 LineSegments 的类。 对于 Meshes，请使用 Face3.vertexColors 函数。如果要标记队列中的数据已经更新，Geometry.colorsNeedUpdate 值需要被设置为 true。
faces：faces 队列。描述每个顶点之间如何组成模型面的面队列。同时该队列保存面和顶点的法向量和颜色信息。如果要标记队列中的数据已经更新，Geometry.elementsNeedUpdate 值需要被设置为 true。
faceVertexUvs：面的 UV 层的队列，该队列用于将纹理和几何信息进行映射。每个 UV 层都是一个 UV 的队列，顺序和数量同面中的顶点相对用。如果要标记队列中的数据已经更新，Geometry.uvsNeedUpdate 值需要被设置为 true。
id：当前 geometry 实例的唯一标识符的数。
isGeometry：用于判断当前类或派生类属于 Geometries。默认值是 true。不应该改变该值，该值用于内部优化。
lineDistances：用于保存线型几何体中每个顶点间距离的。在正确渲染 LineDashedMaterial 时，需要用到该数据。
morphTargets：morph targets 的队列。
morphNormals：一个 morph 法向量的数组。
name：当前几何的可选别名。默认值是一个空字符串。
skinWeights：是一个数组，用于几何体蒙皮的。
skinIndices：是一个数组，用于几何体蒙皮的。
uuid：当前对象实例的 UUID。 该值会被自动分配，请不要修改它。
vertices：vertices 的队列。顶点的队列，保存了模型中每个顶点的位置信息。如果要标记队列中的数据已经更新，.verticesNeedUpdate 值需要被设置为 true。
verticesNeedUpdate：如果顶点队列中的数据被修改，该值需要被设置为 true。
elementsNeedUpdate：如果面队列中的数据被修改，该值需要被设置为 true。
uvsNeedUpdate：如果 UV 队列中的数据被修改，该值需要被设置为 true。
normalsNeedUpdate：如果法向量队列中的数据被修改，该值需要被设置为 true。
colorsNeedUpdate：如果颜色队列或 face3 的颜色数据被修改，该值需要被设置为 true。
groupsNeedUpdate：如果 face3 的 materialIndex 被修改，该值需要被设置为 true。
lineDistancesNeedUpdate：如果 linedistances 队列中的数据被修改，该值需要被设置为 true。

1.2 为什么将多个网格合并成一个网格

当对象的数量非常庞大时，性能就会成为一个瓶颈，因为在组里每个对象还是独立的，需要分别对它们进行渲染和处理，所以数量上来以后性能就会受到很大影响。通过THREE.Geometry的merge方法合并网格，可以极大提升渲染效率。

二、🍀将多个网格合并成一个网格

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，scene场景加入THREE.AxesHelper坐标辅助工具。
  • 6、加入gui控制，定义重绘方法redraw，redraw方法通过THREE.Geometry对象的merge方法实现立方体合并。加入controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn39(将多个网格合并成一个网格)</title><script src="lib/threejs/91/three.js"></script><!--<script src="lib/threejs/127/three.js-master/build/three.js"></script>--><!--<script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>--><script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><!--<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>--><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.shadowMap.enabled = truerenderer.shadowMap.type = THREE.PCFSoftShadowMapdocument.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)camera.position.set(0, 40, 100)camera.lookAt(new THREE.Vector3(0, 0, 0))}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(15, 50, 10)light.castShadow = truescene.add(light)}var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true, opacity: 0.8})var addCube = () => {var cubeGeometry = new THREE.BoxGeometry(1, 1, 1)var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)cube.castShadow = truecube.position.set(-100 + Math.round(Math.random() * 200), -100 + Math.round(Math.random() * 200), -100 + Math.round(Math.random() * 200))return cube}var guivar initGui = () => {//声明一个保存需求修改的相关数据的对象gui = {numberOfObjects: 500, //当前场景中模型的个数combined: false, //是否合并模型redraw: function () {//删除场景内现有的立方体var arr = []scene.traverse(function (e) {if (e instanceof THREE.Mesh) arr.push(e)});arr.forEach(function (value) {scene.remove(value)})//重新生成立方体if (gui.combined) {//合并模型，则使用merge方法合并var geometry = new THREE.Geometry()//merge方法将两个几何体对象或者Object3D里面的几何体对象合并,(使用对象的变换)将几何体的顶点,面,UV分别合并.//THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.for (var i = 0; i < gui.numberOfObjects; i++) {var cube = addCube()cube.updateMatrix()geometry.merge(cube.geometry, cube.matrix)}scene.add(new THREE.Mesh(geometry, cubeMaterial))}else {//不合并模型，则直接将模型放入for (var i = 0; i < gui.numberOfObjects; i++) {scene.add(addCube())}}}};var datGui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）//添加旋转功能datGui.add(gui, "numberOfObjects", 0, 50000)datGui.add(gui, "combined")datGui.add(gui, "redraw")gui.redraw()}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = truecontrols.autoRotate = truecontrols.autoRotateSpeed = 0.5}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initGui()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/59391.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

对于一个需要渲染300帧的动画项目，云渲染要多久

对于一个需要渲染300帧的动画项目，云渲染要多久

探讨云渲染动画300帧需要多久的问题时&#xff0c;我们今天来从多个角度进行分析&#xff0c;对于一个需要渲染300帧的动画项目&#xff0c;传统的本地渲染方式可能会因为硬件限制而变得耗时且效率低下。幸运的是&#xff0c;【渲染101】云渲染技术的出现为这一问题提供了解决方…
阅读更多...
系统上云-流量分析和链路分析

系统上云-流量分析和链路分析

优质博文&#xff1a;IT-BLOG-CN 一、流量分析 【1】流量组成&#xff1a; 按协议划分&#xff0c;流量链路可分为HTTP、SOTP、QUIC三类。 HTTPSOTPQUIC场景所有HTTP请求&#xff0c;无固定场景国内外APP等海外APP端链路选择DNS/CDN(当前特指Akamai)APP端保底IP列表/动态IP下…
阅读更多...
「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中&#xff0c;Canvas 组件可以实现丰富的动态效果&#xff0c;适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画&#xff0c;以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优…
阅读更多...
C 学习（4）

C 学习（4）

return 0; 前提&#xff1a;C 语言规定&#xff0c;main()是程序的入口函数&#xff0c;即所有的程序一定要包含一个main()函数。程序总是从这个函数开始执行&#xff0c;如果没有该函数&#xff0c;程序就无法启动。其他函数都是通过它引入程序的。 main()的写法&#xff0c…
阅读更多...
Springboot3.3 + Mybatis / Mybatis-plus

Springboot3.3 + Mybatis / Mybatis-plus

Java17, Springboot 3.3.5, 项目一启动就报错&#xff1a; Invalid value type for attribute factoryBeanObjectType: java.lang.String 我知道问题出现在pom依赖的版本上。但网上对于Springboot3.3的配置资料并不多&#xff0c;且在我代码上实测还是会报错。搞了一天终于…
阅读更多...
高亚科技签约酸动力，助力研发管理数字化升级

高亚科技签约酸动力，助力研发管理数字化升级

近日&#xff0c;中国企业管理软件资深服务商高亚科技与广东酸动力生物科技有限公司&#xff08;以下简称“酸动力”&#xff09;正式签署合作协议。借助高亚科技的8Manage PM项目管理软件&#xff0c;酸动力将进一步优化项目过程跟踪与节点监控&#xff0c;提升研发成果的高效…
阅读更多...
java多线程编程(二)一一＞线程安全问题, 单例模式, 解决程线程安全问题的措施

java多线程编程(二)一一＞线程安全问题, 单例模式, 解决程线程安全问题的措施

引言&#xff1a; 如果多线程环境下代码运行的结果是符合我们预期的&#xff0c;即在单线程环境应该的结果&#xff0c;则说这个程序是线程安全的 线程安全问题的原因&#xff1a; 一.操作系统的随机调度 &#xff1a; 二.多个线程修改同一个变量&#xff1a; 三.修改操作不是…
阅读更多...
推荐一款非常好用的视频编辑软件：Movavi Video Editor Plus

推荐一款非常好用的视频编辑软件：Movavi Video Editor Plus

MovaviVideoEditorPlus(视频编辑软件)可以制作令人惊叹的视频&#xff0c;即使您没有任何视频编辑方面的经验! 该款视频编辑程序没有复杂的设置&#xff0c;只需进行直观的拖放控制。在您的电脑上免费使用MovaviVideoEditor亲身体验它的简单易用性与强大功能! 基本简介 您是否…
阅读更多...
【算法】递归+深搜+哈希表：889.根据前序和后序遍历构造二叉树

【算法】递归+深搜+哈希表：889.根据前序和后序遍历构造二叉树

目录 1、题目链接 相似题目: 2、题目 ​3、解法&#xff08;针对无重复值&#xff0c;哈希表递归&#xff09; 函数头-----找出重复子问题 函数体---解决子问题 4、代码 1、题目链接 889.根据前序和后序遍历构造二叉树&#xff08;LeetCode&#xff09; 相似题目: 105.…
阅读更多...
高级信号完整性

高级信号完整性

高级信号完整性&#xff0c;2022年版&#xff0c;1473页&#xff0c;24h秒发 内容庞大&#xff0c;都是新的内容、架构 QS排名100内的美国高校课件 发货内容&#xff1a; 29个分章节PDF 1个汇总PDF&#xff0c;1473页 点击获取 课程首先对电磁学进行了回顾。随后&#xff0c;…
阅读更多...
yelp数据集上识别潜在的热门商家

yelp数据集上识别潜在的热门商家

yelp数据集是研究B2C业态的一个很好的数据集&#xff0c;要识别潜在的热门商家是一个多维度的分析过程&#xff0c;涉及用户行为、商家特征和社区结构等多个因素。从yelp数据集里我们可以挖掘到下面信息有助于识别热门商家 用户评分和评论分析 评分均值: 商家的平均评分是反映其…
阅读更多...
qt QDataStream详解

qt QDataStream详解

1. 概述 QDataStream是Qt框架中的一个核心类&#xff0c;主要用于处理二进制数据的序列化和反序列化。它提供了高效、跨平台的方式&#xff0c;将C数据结构转化为字节流&#xff0c;便于在网络传输、持久化存储等场景下使用。QDataStream可以处理包括整数、浮点数、布尔值、字…
阅读更多...
使用Spring Validation实现数据校验详解

使用Spring Validation实现数据校验详解

目录 前言1. Spring Validation概述2. 配置Spring Validation2.1 引入依赖2.2 启用全局校验 3. 使用注解进行参数校验3.1 基本校验注解3.2 使用Pattern进行正则校验3.3 综合示例 4. 在控制器层应用校验4.1 方法参数校验4.2 自定义错误处理 5. 高级应用&#xff1a;自定义校验注…
阅读更多...
链表（C 语言）

链表（C 语言）

目录 一、链表的概念1. 链表的结构2. 链表的分类3. 链表的优势 二、链表的实现1. 无头单项非循环链表的实现1.1 代码说明 2. 带头双向循环链表的实现2.1 代码说明 三、链表和顺序表的区别四、链表总结 一、链表的概念 链表是一种顺序表&#xff0c;它由一个一个的节点组成&…
阅读更多...
QinQ的基础实验

QinQ的基础实验

拓扑 命令 LSW1 [LSW1]vlan batch 2 3 4 Info: This operation may take a few seconds. Please wait for a moment...done. [LSW1]interface g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type hybrid [LSW1-GigabitEthernet0/0/1]port hybrid untagged vlan 2 3 [LSW…
阅读更多...
python-读写Excel：openpyxl-（4）下拉选项设置

python-读写Excel：openpyxl-（4）下拉选项设置

使用openpyxl库的DataValidation对象方法可添加下拉选择列表。 DataValidation参数说明&#xff1a; type&#xff1a; 数据类型("whole", "decimal", "list", "date", "time", "textLength", "custom"…
阅读更多...
Elasticsearch中时间字段格式用法详解

Elasticsearch中时间字段格式用法详解

Elasticsearch中时间字段格式用法详解 攻城狮Jozz关注IP属地: 北京 2024.03.18 16:27:51字数 758阅读 2,571 Elasticsearch&#xff08;简称ES&#xff09;是一个基于Lucene构建的开源、分布式、RESTful搜索引擎。它提供了全文搜索、结构化搜索以及分析等功能&#xff0c;广泛…
阅读更多...
【JavaEE初阶 — 多线程】Thread的常见构造方法＆属性

【JavaEE初阶 — 多线程】Thread的常见构造方法＆属性

目录 Thread类的属性 1.Thread 的常见构造方法 2.Thread 的几个常见属性 2.1 前台线程与后台线程 2.2 setDaemon() 2.3 isAlive() Thread类的属性 Thread 类是JVM 用来管理线程的一个类&#xff0c;换句话说&#xff0c;每个线程都有一个唯一的Thread 对象与之关联&am…
阅读更多...
论文阅读笔记：DRCT: Saving Image Super-Resolution away from Information Bottleneck

论文阅读笔记：DRCT: Saving Image Super-Resolution away from Information Bottleneck

论文阅读笔记&#xff1a;DRCT: Saving Image Super-Resolution away from Information Bottleneck 1 背景1.1 问题1.2 本文提出的方法 2 创新点3 方法4 模块4.1 问题描述4.2 深度特征提取模块4.3 同任务渐进式训练策略 5 效果5.1 和SOTA方法对比 论文&#xff1a;https://arxi…
阅读更多...
数据结构 —— 红黑树

数据结构 —— 红黑树

目录 1. 初识红黑树 1.1 红黑树的概念 1.2 红⿊树的规则 1.3 红黑树如何确保最长路径不超过最短路径的2倍 1.4 红黑树的效率:O(logN) 2. 红黑树的实现 2.1 红黑树的基础结构框架 2.2 红黑树的插⼊ 2.2.1 情况1&#xff1a;变色 2.2.2 情况2&#xff1a;单旋变色 2.2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023