上个章节给车间添加了线边仓，也就是货架，但是货架上是空的，这节给货架添加货物，货架的结构是循环出来的，那么货物也就可以循环生成出来，
首先我们可以封装一个方法用来生成货物，必要的参数是货物的位置也就是x,y,z,还有一个货物名称，为了货物看起来更真实，我们给他添加一个贴图，不是再像之前那样添加纯色了，图片是这样的
代码如下:新建一个3*3*2的几何体，添加贴图加载器，在贴图加载器中加载贴图，加载后创建贴图材质，然后通过几何体和材质创建一个网格模型并添加到场景中，
//新增料箱
addCube(x,y,z,name){
let geometry = new THREE.BoxGeometry(3,3,2)
const textureLoader = new THREE.TextureLoader();
textureLoader.load("/static/images/box.png", (texture) => {
const material = new THREE.MeshBasicMaterial({map: texture});
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x,y,z);
mesh.name = name
this.scene.add(mesh);
});
},
下面就需要设计如何循环生成货物并放置到货架的储位上了，我们在创建货架的时候创建了shiftList集合，里面放的是货架，那么我们只需要先循环货架，在循环货架中循环货架的层和列，在三层循环的循环体内调用创建货物的方法就好了，
代码如下：
initCube(){
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 shorageName = this.shelfList[q].shelfName + "_" + (i + 1) + "层_" + (j + 1) + "列"
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
this.addCube(x - 2, y, z, "box " + "_" + shorageName + "_1")
}
}
}
},
不过这里可以看到货架的深度有点深，一个货物不足以占满整层，这里就再给他添加一个货物，放在同一列。先把原始的料箱往内偏移一点，在外层再创建一个料箱就好了，代码修改如下：
initCube(){
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 shorageName = this.shelfList[q].shelfName + "_" + (i + 1) + "层_" + (j + 1) + "列"
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
this.addCube(x - 2, y, z, "box " + "_" + shorageName + "_1")
this.addCube(x + 2, y, z, "box " + "_" + shorageName + "_2")
}
}
}
},
效果：
现在就好很多了，不过之前产线上的货物还是纯色的红色正方体，我们可以顺便利用这个贴图也给他加上，
代码如下：
initBox(x,y,z){
const textureLoader = new THREE.TextureLoader();
for (let i = 0; i < 22; i++) {
textureLoader.load("/static/images/box.png", (texture) => {
let geometry = new THREE.BoxGeometry(3,3,3);//创建一个几何体
const material = new THREE.MeshBasicMaterial({map: texture});
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(x+i*10,y,z+2);
this.scene.add(mesh);
this.boxList.push(mesh)
});
}
for (let i = 0; i < 22; i++) {
this.scene.add(this.boxList[i]);//添加到场景中
}
},
现在的整个车间效果如下：
