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)-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);

我们可以看下效果