ThreeJs模拟工厂生产过程八

        这节算是给这个车间场景收个尾,等了几天并没有人发设备模型给我,只能自己找了一个凑合用了。加载模型之前,首先要把货架上的料箱合并,以防加载模型之后因模型数量多出现卡顿,方法和之前介绍的合并传送带方法相同,代码如下:

 //初始化料箱initCube(){let cubeList = [];const textureLoader = new THREE.TextureLoader();let texture = textureLoader.load("/static/images/box.png",)const material = new THREE.MeshBasicMaterial({map: texture});for(let q=0; q<this.shelfList.length;q++){for(let i=0;i<this.layerNum;i++){for(let j=0;j<this.columnNum;j++){let x = this.shelfList[q].positionX;let y = this.shelfList[q].positionY + 2 + j * (this.plane.planeLength / 3)let z = this.shelfList[q].positionZ + i * (this.holder.holderHeight + this.plane.planeHeight)-9cubeList.push(this.addCube(x - 2, y, z));cubeList.push(this.addCube(x + 2, y, z));}}}const bayGeometry = mergeGeometries(cubeList);//合并模型数组let cubeModelMesh = new THREE.Mesh(bayGeometry, material);//生成一整个新的模型this.scene.add(cubeModelMesh);},//新增料箱addCube(x,y,z){let geometry = new THREE.BoxGeometry(3,3,2)let material = new THREE.MeshBasicMaterial({color: 0x00ff00});let mesh = new THREE.Mesh(geometry, material);mesh.position.set(x,y,z);mesh.updateMatrix();//更新模型变换矩阵return mesh.geometry.applyMatrix4(mesh.matrix);//启动并应用变换矩阵},

        然后开始替换模型。首先我们下载好模型放到本地,我下载的是gltf的格式,之前用引入人的模型已经导入此组件,不用再次导入了,我们只需要在绘制模型的外面加载模型,并在循环中克隆加载到的模型,并根据模型的大小进行缩放和位置偏移。为了方便查看替换过程,我把for循环分开写了。代码如下:

initMachine(){ // 初始哈设备this.initPerson(this.begin.x,this.begin.y,this.begin.z);const loader = new GLTFLoader()let addressY = this.begin.yloader.load("/static/models/device/scene.gltf", (gltf) => {let machine =  gltf.scenemachine.scale.set(0.08,0.08,0.8)machine.rotation.x = Math.PI/2machine.rotation.y = Math.PI/2for (let i = 0; i < 5; i++) {for (let i = 0; i < this.machineList.length; i++) {let temp = machine.clone();temp.position.set(this.begin.x+20+45*i,addressY+2,this.begin.z-10)this.scene.add(temp);//添加到场景中}addressY = addressY +60}})for (let i = 0; i < 5; i++) {for (let i = 0; i < this.machineList.length; i++) {this.initMachineName(this.begin.x+20+45*i,this.begin.y,10,this.machineList[i])this.initConveyor(this.begin.x+(this.conveyor.lang/2),this.begin.y,this.begin.z,6,this.conveyor.lang);//前三个参数是xyz,后面两个一个是传送带宽度,一个是传送带长度this.addWarning(this.begin.x-5,this.begin.y,this.begin.z-9,2,30);//添加警戒线}this.begin.y = this.begin.y +60}},

这样我们就得到这样的效果

        总的来说比之前好看一些了,但是数字孪生的场景是为了模拟真实情况并查看数据的,所以我们要给设备加点数据才行,之前用了精灵组件简单的做了个设备工序名,这里为了显示更复杂的样式引用CSS2DRender,他的好处是可以做一个html的div显示在设备上,样式与原生的方法一样,这样就可以设置好看的标签样式了。

首先我们需要引入两个组件CSS2DRenderer, CSS2DObject,然后我们用js创建一个div,并根据自己的需求做一个好看的div样式和数据,然后把div塞到CSS2DObject中,并设置这个对象的位置,然后加载到场景中。

 const earthDiv = document.createElement('div');earthDiv.className = "label";earthDiv.innerHTML = "<div style='border:1px #FFFFFF solid;border-radius: 3px;'>" +"<span style='font-size: 12px;'>"+machine.name+"</span><br/>" +"<span style='font-size: 12px;'>PASS:100 个</span><br/>" +"<span style='color:red;font-size: 12px;'>NG:2 个</span>" +"</div>";const earthLabel = new CSS2DObject(earthDiv);earthLabel.position.set(x,y,z);//相对于父级元素的位置this.scene.add(earthLabel);this.labelRenderer = new CSS2DRenderer();this.labelRenderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(this.labelRenderer.domElement)

不过要注意的是这个CSS2DObject需要用CSS2DRenderer才能渲染,所以我们需要再创建CSS2DRenderer渲染器,并放到控制器和动画绘制中,保证CSS2DObject能够正常渲染

 this.labelRenderer = new CSS2DRenderer();this.labelRenderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(this.labelRenderer.domElement)//设置样式this.labelRenderer.domElement.style.position = 'fixed';this.labelRenderer.domElement.style.top = '0px';this.labelRenderer.domElement.style.left = '0px';this.labelRenderer.domElement.style.zIndex = '10';//设置层级this.controls = new OrbitControls(this.camera, this.labelRenderer.domElement);//创建控制器this.labelRenderer.render(this.scene,this.camera);

我们可以看下效果

我审美有限,大家可以根据需求和选择适合的模型和绘制更美观的标签Label,完整效果如下:

车间视频end

整个生产车间的数字孪生就到这里,需要源码的可以在评论区给我留下邮箱地址,我发给你,如果觉得有哪里不足的地方也可以给我留言,可以根据需求后续再添加章节完善这个场景。

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

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

相关文章

【HTTP协议】了解http需要学习哪些内容

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是超文本传输协议&#xff0c;互联网上应用最广泛的一种协议&#xff0c;它负责在客户端和服务器之间传输数据。本文将从HTTP协议的基本原理、请求-响应模型、常见特性以及应用场景等方面进行总结。 1. HTTP基本原理 …

react 基于qrcode.react生成颜色不同 , 样式不同的二维码

实现效果: 1 首先在react中 , 导入下载qrcode.react npm install qrcode.react2 在react中导入使用 , 并导入ui样式 import QRcode1 from /assets/images/QRcode1.png import QRcode2 from /assets/images/QRcode2.png import QRcode3 from /assets/images/QRcode3.png impo…

Qt客服端开发的组件库

Qt 是一个功能丰富的跨平台 C 应用程序框架&#xff0c;它包含了许多用于不同目的的组件库。以下是一些主要的 Qt 组件库&#xff0c;这些库为开发者提供了广泛的工具和功能&#xff0c;以便构建复杂的应用程序。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&a…

二、再识VUE-MVVM

一、初识VUE 二、再识VUE-MVVM 三、VUE数据代理 MVVM Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来。实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters。 ViewModel 一个同步 Model 和 View 的对象。在 Vue.js…

综合性练习(后端代码练习1)——加法计算器

目录 一、准备工作 二、约定前后端交互接口 1、概念介绍 2、需求分析 3、接口定义 请求参数 响应数据 三、服务器代码 四、前端页面代码 五、运行测试 遇到问题如何解决&#xff1f; 需求&#xff1a;输入两个整数&#xff0c;点击 “点击相加” 按钮&#xff0c;显…

计算机服务器中了mkp勒索病毒怎么办,mkp勒索病毒解密数据恢复流程

网络技术的不断应用与发展&#xff0c;为企业的生产运营带来了极大便利&#xff0c;越来越多的企业依赖网络开展各项工作业务&#xff0c;网络也大大提升了企业的生产运营效率&#xff0c;但网络是一把双刃剑&#xff0c;在为企业提供便利的同时&#xff0c;也为企业的数据安全…

M2 Mac mini跑Llama3

前言 在4-19左右&#xff0c;Meta 宣布正式推出下一代开源大语言模型 Llama 3&#xff1b;共包括 80 亿和 700 亿参数两种版本&#xff0c;号称 “是 Llama 2 的重大飞跃”&#xff0c;并为这些规模的 LLM 确立了新的标准。实际上笔者早就体验过&#xff0c;只不过自己电脑没什…

238 基于matlab的水平轰炸弹道的求解

基于matlab的水平轰炸弹道的求解&#xff0c;列出轰炸弹道方程组并利用龙格库塔法解算弹道方程。设计中包含了二维弹道与三维弹道的计算&#xff0c;并都绘制了弹道运动轨迹&#xff0c;最终还将整个题目集中在一个图形用户界面&#xff08;GUI&#xff09;上。程序已调通&…

Upload-labs 靶场通关解析(上)

前言 文件上传漏洞是一种常见的网络安全漏洞&#xff0c;存在于许多Web应用程序中。攻击者利用这个漏洞可以上传恶意文件到目标服务器&#xff0c;从而执行各种恶意操作&#xff0c;如执行恶意代码、获取敏感信息、控制服务器等。 文件上传漏洞的原理是&#xff0c;Web应用程…

Llama 3 ——开源大模型Llama 3从概念到使用

概述 Meta公司自豪地宣布推出其最新的开源大型语言模型——Llama 3&#xff0c;这是一款专为未来AI挑战而设计的先进工具。Llama 3包含两个不同参数规模的版本&#xff0c;以满足多样化的计算需求&#xff1a; 8B版本&#xff1a;优化了在消费级GPU上的部署和开发流程&#xf…

【设计模式】抽象工厂模式(Abstract Factory Pattern)

目录标题 抽象工厂设计模式详解1. 介绍2. 结构3. 实现步骤3.1 创建抽象产品接口3.2 创建具体产品类3.3 创建抽象工厂接口3.4 创建具体工厂类 4. 好处与优点5. 坏处与缺点6. 适用场景7. 总结 抽象工厂设计模式详解 1. 介绍 抽象工厂模式是一种创建型设计模式&#xff0c;它提供…

学生管理系统[Python语言]

各位大佬好 &#xff0c;这里是阿川的博客 &#xff0c; 祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 学生管理系统是计算机专业最基础的一个作业&#…

算法设计优化——起泡排序

文章目录 0.概述1 起泡排序&#xff08;基础版&#xff09;1.1 算法分析1.2 算法实现1.3 重复元素与稳定性1.4 复杂度分析 2 起泡排序&#xff08;改进版&#xff09;2.1 目标2.2 改进思路2.3 实现2.4 复杂度分析 3 起泡排序&#xff08;改进版2&#xff09;3.1 目标3.1 改进思…

edge 入门基础了解使用

随着Windows 11的发布&#xff0c;Microsoft Edge也迎来了新的更新和改进。作为一名长期使用Edge的用户&#xff0c;我不仅注意到了这些表面的变化&#xff0c;还深入研究了Edge在Windows 11上的新特性和潜在优势。 快捷方式 查找框 在Microsoft Edge浏览器中&#xff0c;按…

智能穿戴终端设备安卓主板方案_MTK平台智能手表PCBA定制开发

新移科技智能手表方案兼容WiFi、BLE、2~5G等多种通信能力。支持多个功能模块&#xff0c;包括&#xff1a;通话、计步、定位、睡眠监测、心率监测、血氧监测等。智能手表通过滑动与功能性按键提供高度直观的体验感受&#xff0c;从腕间即可掌控日常生活。形态支持定制包括&…

MySQL从入门到高级 --- 4.约束

文章目录 第四章&#xff1a;4.MySQL约束4.1 主键约束4.1.1 添加单列主键4.1.2 添加多列主键(联合主键)4.1.3 通过修改表结构添加主键4.1.4 删除主键约束4.1.5 自增长约束特点 4.1.6 指定自增字段初始值 - 创建表时指定4.1.7 指定自增字段初始值 - 创建表之后4.1.8 delete与tru…

洞察未来:数据治理中的数据架构新思维

随着大数据时代的来临&#xff0c;数据已经成为企业运营和社会发展的重要资产。然而&#xff0c;数据的复杂性和快速增长给企业带来了前所未有的挑战。在这样的背景下&#xff0c;数据治理成为了企业不可或缺的一环。数据治理不仅涉及数据的管理、安全和隐私保护&#xff0c;更…

ubuntu部署sonar与windows下使用sonar-scanner

ubuntu部署sonar与windows下使用sonar-scanner sonar部署java安装mysql安装配置sonarqube 插件安装sonar-scanner使用简单使用 sonar部署 使用的是sonarqube-7.5&#xff0c;支持的java环境是jdk8&#xff0c;且MySQL版本 >5.6 && <8.0 java安装 打开终端&…

Jackson-自定义注解及实现数据脱敏、枚举转换

Hi,大家好&#xff0c;我是抢老婆酸奶的小肥仔。 上一章&#xff0c;我们介绍了下Jackson及相关的注解&#xff0c;其实我们可以通过仿照一些注解来实现自定义以满足我们自己的业务需求&#xff0c;这一章&#xff0c;我们来说说jackson提供的自定义注解及一些应用吧。 废话不…

Virtualbox7.0.10--创建虚拟机

前言 下载Virtualbox7.0.10&#xff0c;可参考《Virtualbox–下载指定版本》 Virtualbox7.0.10具体安装步骤&#xff0c;可参考《Virtualbox7.0.10的安装步骤》 Virtualbox7.0.10创建虚拟机&#xff0c;可参考《Virtualbox7.0.10–创建虚拟机》 Virtualbox7.0.10安装Ubuntu20.0…