车间模型有了，但是还是显得空旷，这节给车间添加线边仓，线边仓的作用是为了节省时间，保持产线持续生产的，比如生成手机的时候，会更多的原料放在线边仓，如果产线上的物料用完了，可以从线边仓得到补给，而不用去仓库领料，这样可以保持产线的不间断，所以一般的仓库都有线边仓的存在，有的也叫暂存仓等。
之前的章节中有绘制过仓库，我们可以参考那个章节的功能，先分析功能，假设我们需要绘制一个两排，五层，三列的货架，。那么首先应该需要循环三次，第一层循环是循环两次，产生两排货架，并保证每次循环，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);
},
绘制结果如下：
