ThreeJs模拟工厂生产过程八

简介: 这篇文章详细介绍了如何在Three.js中模拟工厂生产过程的第八部分,重点是优化场景中的模型,包括合并货架上的料箱以减少渲染负担,并替换设备模型以增强场景的真实性和互动性。

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

 //初始化料箱
    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)-9
            cubeList.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.y
      loader.load("/static/models/device/scene.gltf", (gltf) => {
        let machine =  gltf.scene
        machine.scale.set(0.08,0.08,0.8)
        machine.rotation.x = Math.PI/2
        machine.rotation.y = Math.PI/2
        for (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,完整效果如下:
WechatIMG124.jpg
车间视频end

这里不支持上传视频,我就只能上传个图片了,如果想看动态效果可以私我,我发给你视频

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

相关文章
|
2月前
ThreeJs模拟工厂生产过程六
这篇文章详细介绍了如何在Three.js中模拟工厂生产过程的第六部分,重点是创建和实现车间内线边仓货架的三维模型及其布局。
35 1
ThreeJs模拟工厂生产过程六
|
10天前
|
数据可视化 决策智能
你的文档还是静态的吗?实时协作改变游戏规则!
在高效协作成为工作刚需的今天,协作文档已成为团队核心需求。本文从团队需求出发,深入分析了实时协作的重要性、关键特性和解决方案,探讨了文档、任务和数据联动的新趋势,强调了选择合适工具对提升团队效率的关键作用。
|
2月前
|
UED
ThreeJs模拟工厂生产过程三
这篇文章介绍了在Three.js中通过使用mergeGeometries技术来合并大量车间模型,以减少浏览器渲染负担,提高性能,并提供了实现模型合并的具体方法和步骤。
52 5
|
2月前
ThreeJs模拟工厂生产过程一
这篇文章详细介绍了如何使用Three.js模拟工厂生产过程的第一部分,包括创建传送带、生产设备和产品的模型,并实现产品沿传送带移动的动画效果。
61 5
|
2月前
ThreeJs模拟工厂生产过程二
这篇文章详细介绍了如何使用Three.js创建一个模拟工厂车间的3D模型,包括绘制地面和墙面的具体步骤,并特别关注于如何创建带有门的墙面以增加车间的真实性。
66 5
|
2月前
ThreeJs模拟工厂生产过程四
这篇文章详细说明了如何在Three.js中为模拟的工厂产线添加警戒线,以增强产线模型的真实感和安全性表现,通过使用`PlaneGeometry`来创建并定位这些警戒线。
24 1
|
2月前
|
程序员 图形学
ThreeJs模拟工厂生产过程五
这篇文章详细介绍了如何在Three.js中模拟工业生产过程的第五部分,重点在于添加并实现车间内人物的动态行走动画,使人能够在车间内来回移动,增加了场景的真实感。
56 0
|
2月前
ThreeJs模拟工厂生产过程七
这篇文章详细介绍了如何在Three.js中为工厂车间的货架动态生成并放置货物,通过循环逻辑和贴图应用使货架上的物品更加逼真,增强了场景的真实感。
27 0
|
4月前
|
开发者 图形学 Java
Unity物理引擎深度揭秘:从刚体碰撞到软体模拟,全面解析实现复杂物理交互的技巧与秘诀,助你打造超真实游戏体验
【8月更文挑战第31天】物理模拟在游戏开发中至关重要,可让虚拟世界更真实。Unity作为强大的跨平台游戏引擎,内置物理系统,支持从刚体碰撞到布料模拟的多种功能。通过添加Rigidbody组件,可实现物体受力和碰撞;使用AddForce()施加力;通过关节(如Fixed Joint)连接刚体以模拟复杂结构。Unity还支持软体物理,如布料和绳索模拟,进一步增强场景丰富度。掌握这些技术,可大幅提升游戏的真实感和玩家体验。
176 0
|
6月前
|
程序员
老程序员分享:Mock数据:模拟数据
老程序员分享:Mock数据:模拟数据
27 0