ThreeJs模拟工厂生产过程四

        上节解决了模型多会存在的模型卡顿问题，用了模型整合来结局，这节继续这个模型的完善，很多时候可以在产线看到地上会画警戒线，防止工作人员越界以被机器伤到，所以会在机器的危险区域用警戒线框起来，那么这节做绘制警戒线的功能。

        首先我们需要先针对一个产线做警戒线，然后再加到循环中给五个产线都加上警戒线。加警戒线我们使用PlaneGeometry对象，这是一个专门绘制2维的对象，他的属性如下

//平面的宽度（width）和高度（height），以及宽度分段数（widthSegments）和高度分段数（heightSegments）

new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

上面的分段数属性并不是吧这个线段分成多少段，而是指里面组成的三角形数量，你可以理解为分段数越多这个形状绘制的越丝滑，但是对性能的消耗也越多。下面我们绘制一条警戒线，一条产线的警戒线有四条，分别上下左右，我们先绘制上下部分

      //创建警戒线的贴图
      let LineMat = new THREE.MeshLambertMaterial();
      new THREE.TextureLoader().load( "/static/images/line.png", function( map ) {
        LineMat.map = map;
        LineMat.needsUpdate = true;
      } );
      //绘制一条横着的警戒线
      let geometryTop = new THREE.PlaneGeometry( width, length );
      let objTop = new THREE.Mesh( geometryTop, LineMat );
      objTop.position.set(x,y,z);
      this.scene.add( objTop );
      //绘制一条横着的警戒线
      let objBottom = objTop.clone()
      objBottom.position.set(x+lineLength,y,z);
      this.scene.add( objBottom );

因为上下的警戒线是相同的，所以这里绘制好顶部的警戒线，下面的直接clone一下，再改个位置就好了，贴图我找了一个黄色的图片，作为纹理贴图，这样我认为效果会好点。

下面绘制左右两侧的，左右两侧的也是相同的长度和宽度，所以也采用clone的方式做出另外一条，但是左右两侧的位置要向y正方向和负方向各偏移半个宽度。代码如下:

 let lineLength = this.conveyor.lang + 10;//加长一点警戒线的长度保证完全把产线包含在内
//绘制一条横着的警戒线
      let objBottom = objTop.clone()
      objBottom.position.set(x+lineLength,y,z);
      this.scene.add( objBottom );
      //绘制两条竖着的警戒线
      let geometry1 = new THREE.PlaneGeometry( width, lineLength ,2,5);
      let obj1 = new THREE.Mesh( geometry1, LineMat );
      obj1.rotation.z = -Math.PI / 2.0;
      obj1.position.set(x+lineLength/2,y+length/2-1,z);
      this.scene.add( obj1 );
      //因为左右两侧的警戒线只是在位置上有区别，所以可以clone一条出来修改位置就好了
      let obj2 = obj1.clone();
      obj2.position.set(x+lineLength/2,y-length/2+1,z);
      this.scene.add( obj2 );

这样就绘制出一个警戒线长方体把产线框在里面了，下面就只需要把它加到循环里，给所有的产线都加上警戒线就好了

 initMachine(){ // 初始哈设备
      for (let i = 0; i < 5; i++) {
        for (let i = 0; i < this.machineList.length; i++) {
          let geometry = new THREE.BoxGeometry(15,15,20);//创建一个几何体
          let material = new THREE.MeshBasicMaterial({color:'#CCCCCC'});//创建材质
          let box = new THREE.Mesh(geometry, material);//创建网格模型
          box.position.set(this.begin.x+20+35*i,this.begin.y,this.begin.z)
          this.initMachineName(this.begin.x+20+35*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.scene.add(box);//添加到场景中
          this.addPlane(this.begin.x-5,this.begin.y,this.begin.z-9,2,30);//添加警戒线
        }
        this.begin.y = this.begin.y +60
      }
    },

效果如下：

这样所有的警戒线都加好了，车间也更完善了一点，好了警戒线的添加方法就到这里，如果需要添加其他的警戒线也是用类似的方法就好了