学习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，一经查实，立即删除！

相关文章

练习题 - Django 4.x Test 单元测试使用示例和配置方法

练习题 - Django 4.x Test 单元测试使用示例和配置方法

在现代软件开发中，单元测试是保障代码质量的一个重要环节。通过单元测试，开发者能够验证代码的正确性，确保代码的变更不会引入新的错误。Django 作为一个功能强大的 web 框架，内置了丰富的测试工具，使得开发者能够轻松编写、执行和维护测试用例。掌握 Django 的单元测试方…
阅读更多...
对于一个需要渲染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 实训第12天 (git版本控制继续)

java 实训第12天 (git版本控制继续)

Linux下使用到的命令&#xff1a; ls -al //查看当前目录下的文件及文件夹 mkdir //新建目录 rm -rf //递归强制删除文件夹 版本控制 一、安装配置 1、下载地址 https://git-scm.com/ 2、初始配置 #用户名 git config --global user.n…
阅读更多...
15分钟学 Go 第 35 天：Go的性能调优 （7000字详细教程）

15分钟学 Go 第 35 天：Go的性能调优 （7000字详细教程）

第35天&#xff1a;Go的性能调优 目标&#xff1a;理解Go语言中基本的性能优化&#xff0c;学习如何分析和提高Go程序的执行效率。 一、性能调优概述 性能调优是软件开发中的一个重要环节&#xff0c;它可以确保程序在资源有限的环境下高效运行。Go语言天生具备高效的性能表现…
阅读更多...
Linux APT 教程：从入门到精通

Linux APT 教程：从入门到精通

APT&#xff08;Advanced Package Tool&#xff09;是Debian及其衍生发行版&#xff08;如Ubuntu&#xff09;中的一个强大且用户友好的软件包管理工具。它允许用户轻松地安装、更新、升级和卸载软件包&#xff0c;同时处理复杂的依赖关系。本教程将从入门到精通&#xff0c;带…
阅读更多...
java多线程编程(二)一一＞线程安全问题, 单例模式, 解决程线程安全问题的措施

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

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

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

MovaviVideoEditorPlus(视频编辑软件)可以制作令人惊叹的视频&#xff0c;即使您没有任何视频编辑方面的经验! 该款视频编辑程序没有复杂的设置&#xff0c;只需进行直观的拖放控制。在您的电脑上免费使用MovaviVideoEditor亲身体验它的简单易用性与强大功能! 基本简介 您是否…
阅读更多...
Pimpl（Pointer to Implementation）模式详解

Pimpl（Pointer to Implementation）模式详解

Pimpl&#xff08;Pointer to Implementation&#xff09;模式详解 在 C 中&#xff0c;Pimpl 模式&#xff08;Pointer to Implementation&#xff09;是一种设计技巧&#xff0c;常用于隐藏实现细节&#xff0c;减少头文件的依赖。这种模式又被称为“隐式实现”或“编译防护…
阅读更多...
js下载excel示例demo

js下载excel示例demo

<Buttontype{"primary"}key"out"onClick{async ()>{const ExportJsonExcel require("js-export-excel");const datas selectedRowsState //确保勾到的数据是一个列表&#xff0c;列表中每个值是字典const option {};const dataTable […
阅读更多...
mac 修改启动图图标数量

mac 修改启动图图标数量

调整每行显示图标数量&#xff1a; defaults write com.apple.dock springboard-rows -int 7 调整每列显示的数量 defaults write com.apple.dock springboard-columns -int 8 最后重置一下启动台 defaults write com.apple.dock ResetLaunchPad -bool TRUE;killall Dock 其…
阅读更多...
Go使用SIMD指令——以string转为整数为例

Go使用SIMD指令——以string转为整数为例

本文Go使用SIMD指令采用如下方式&#xff1a; C编写对应的程序clang编译成汇编c2goasm将上述生成的汇编转为go的汇编 准备工具 clang。直接使用apt-get install clang安装即可c2goasm。 go get -u github.com/minio/c2goasm来进行安装asm2plan9s。 go get -u github.com/min…
阅读更多...
【算法】递归+深搜+哈希表：889.根据前序和后序遍历构造二叉树

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

目录 1、题目链接 相似题目: 2、题目 ​3、解法&#xff08;针对无重复值&#xff0c;哈希表递归&#xff09; 函数头-----找出重复子问题 函数体---解决子问题 4、代码 1、题目链接 889.根据前序和后序遍历构造二叉树&#xff08;LeetCode&#xff09; 相似题目: 105.…
阅读更多...
【矩阵的大小和方向的分解】

【矩阵的大小和方向的分解】

“大小”&#xff1a;在特征值分解和奇异值分解中&#xff0c;矩阵的“大小”通常由特征值或者奇异值表示&#xff0c;它们描述了矩阵在不同方向上拉伸或压缩的程度。“方向”&#xff1a;特征向量和奇异值分解中的方向矩阵 ( U ) 和 ( V ) 则描述了矩阵作用下空间中各个方向的…
阅读更多...
【AIGC】如何充分利用ChatGPT：有效提示框架与基本规则

【AIGC】如何充分利用ChatGPT：有效提示框架与基本规则

概述 在使用ChatGPT进行内容创作时&#xff0c;遵循结构化的提示框架和基本规则可以显著提升AI响应的质量。本文探讨了五种结构化的提示框架&#xff0c;并详细介绍了基本规则和进阶技巧&#xff0c;帮助您更有效地与ChatGPT互动。 基础规则 规则1&#xff1a;指令放在开头&…
阅读更多...
高级信号完整性

高级信号完整性

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

Copyright @ 2022~2023