ThreeJs模拟工厂生产过程六

        车间模型有了，但是还是显得空旷，这节给车间添加线边仓，线边仓的作用是为了节省时间，保持产线持续生产的，比如生成手机的时候，会更多的原料放在线边仓，如果产线上的物料用完了，可以从线边仓得到补给，而不用去仓库领料，这样可以保持产线的不间断，所以一般的仓库都有线边仓的存在，有的也叫暂存仓等。

        之前的章节中有绘制过仓库，我们可以参考那个章节的功能，先分析功能，假设我们需要绘制一个两排，五层，三列的货架，。那么首先应该需要循环三次，第一层循环是循环两次，产生两排货架，并保证每次循环，x或者y轴存在偏移来保持货架不重叠，偏移的距离要大于货架的长度或者宽度，第二层循环用来循环是循环五次，产生货架的层数，货架的层数要考虑到层板厚度的影响，层数的偏移要大于今后放置物品的高度，第三层循环是循环每层的列数，循环列数要注意的是考虑到立柱的宽度，也就是货架腿的宽度，最终产生完整的货架。

首先我们需要整合下数据，下面是代码：

 initShelf(){
      for (let i = 0; i < this.rackRowCount; i++) { //循环两次产生两排
        this.indistanceY = this.indistanceY + 55;//并排货架的偏移量，正式开发中可以根据货架的层板动态算出来
        for (let j = 0; j < this.rackColCount; j++) { //循环三次产生三列
          let shelfName = '货架' + (j + 1) + "上"
          this.shelfList.push({
            shelfName: (i + 1) + "排_" + shelfName,
            planeWidth: this.plane.planeWidth,
            planeHeight: this.plane.planeHeight,
            planeLength: this.plane.planeLength,
            holderLength: this.holder.holderLength,
            holderHeight: this.holder.holderHeight,
            holderWidth: this.holder.holderWidth,
            positionX: this.indistanceX,
            positionY: this.indistanceY + (j * this.plane.planeLength),//每个货架层平移产生多列货架
            positionZ: this.holder.holderHeight ,//距离地面的高度
            layerNum: this.layerNum,
            columnNum: this.columnNum
          });
        }
      }
      for(let i = 0;i < this.shelfList.length; i++){//再次循环货架列，调用生成货架的方法，传参要包含xyz，以及长宽高等
        for(let j = 0; j < this.shelfList[i].layerNum; j++){//循环每列货架的的层数
          this.addShelf(
              this.shelfList[i].positionX,
              this.shelfList[i].positionY,
              this.shelfList[i].positionZ*(j+1)-10,//因为整个场景的地板并非0，所以要往下偏移让货架腿放在地板上，+1是为了层板厚度
              this.shelfList[i].planeWidth,
              this.shelfList[i].planeLength,
              this.shelfList[i].planeHeight,
              this.shelfList[i].holderLength,
              this.shelfList[i].holderWidth,
              this.shelfList[i].holderHeight,
              this.shelfList[i].shelfName+"_"+(j+1)+"层",
              this.shelfList[i].columnNum);
        }
      }
    },

这部分是把货架数据放到shelfList，再通过循环layerNum调用绘制货架的方法，实现冬天绘制货架，

绘制货架，先要考虑需要绘制的模型，模型会包括三条腿和每层的层板，每层的层板是独立的，四条腿是形状大小一样的，我们只需要绘制一个几何体，然后引用几何体绘制网格模型并设置其对应的位置就好了。绘制货架要注意考虑货架的层板，立柱的相互影响，要设置正确的偏移量以保证绘制的正确性，可以先根据逻辑绘制出来，再根据展示的效果调整偏移量，偏移量尽量用动态数据，放置后面修改了货架的长宽高后需要再次调整偏移量数据。代码如下：

//新增货架
    addShelf(x,y,z,plane_x,plane_y,plane_z,holder_x,holder_y,holder_z,name,num){
      let RackMat2 = new THREE.MeshPhongMaterial({
        color: 0xffffff, // 设置颜色
        shininess: 20 // 设置高光大小，范围为0到128，默认值为30
      });
      let plane = new THREE.BoxGeometry( plane_x, plane_y/num+1,plane_z);//层板考虑柱子腿宽度
      for(let i = 0; i < num; i++){//循环每层的个数
        let gz =  y + plane_y/num/2 + (plane_y/num)*i + 0.5;//柱子腿宽度为1，要偏移0.5
        let obj = new THREE.Mesh( plane, RackMat2 );
        obj.position.set(x, gz, z) ;
        obj.name = name
        this.scene.add(obj);
      }
      let holder = new THREE.BoxGeometry( holder_x, holder_y, holder_z );
      let obj2 = new THREE.Mesh( holder, RackMat2, 0 );
      let obj3 = new THREE.Mesh( holder, RackMat2, 0 );
      let obj4 = new THREE.Mesh( holder, RackMat2, 0 );
      let obj5 = new THREE.Mesh( holder, RackMat2, 0 );
      obj2.position.set(x-plane_x/2+holder_x/2,y+holder_y/2,z-holder_z/2-plane_z/2,);
      obj3.position.set(x+plane_x/2-holder_x/2,y+holder_y/2, z-holder_z/2-plane_z/2, );
      obj4.position.set(x-plane_x/2+holder_x/2,y+plane_y-holder_y/2+1,z-holder_z/2-plane_z/2 );
      obj5.position.set(x+plane_x/2-holder_x/2,y+plane_y-holder_y/2+1, z-holder_z/2-plane_z/2 );
      this.scene.add(obj2);this.scene.add(obj3);this.scene.add(obj4);this.scene.add(obj5);
    },

绘制结果如下：