上一节已经把产线的基本demo搭建完成，这节先不美化产线，先搭建个车间用来放置这个产线，后期再一起想办法做美化，绘制车间，我们要先绘制地面。地面实际上就是一个很薄的长方体，长方体的长和宽就是车间的面积，高度设置为1，再加一点颜色，作为地面，这里用了一个蓝色的图片作为贴图，如果找不到合适的，也可以把贴图的去掉，用设置的颜色作为地面颜色就好了。我们先定义地面的起画点，再设置地面的宽高，这样方便后期修改，代码如下：
floor:{floorWidth:300, floorLength:300,depth:1},
sceneBegin: { x: 0, y: 0, z: 0 },
initFloor(){
let floorGeometry = new THREE.BoxGeometry( this.floor.floorWidth,this.floor.floorLength,this.floor.depth);
let floorMaterial = new THREE.MeshPhysicalMaterial({color:'#FFFFFF'});
let textureFloor = new THREE.TextureLoader().load('/static/images/floor.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
})
floorMaterial.map = textureFloor
let floor = new THREE.Mesh( floorGeometry, floorMaterial );
floor.name = '地板';
floor.position.set(this.sceneBegin.x+this.floor.floorWidth/2,this.sceneBegin.y+this.floor.floorLength/2,this.sceneBegin.z-10)
this.scene.add(floor)
},
绘制好地面后，再绘制墙面，墙面比起地面要复杂的多，在之前绘制仓库的章节里有写过，但是那次的墙面是完整的，正常车间是有门的，所以我们需要绘制5面墙，其中三面是完整的，最后一面墙是用两个模型，中间留下间隔作为门，而且每个墙面的下面要和地面对齐，我们先设定好每面墙的参数，长宽高以及放置的位置，除了那两个特殊墙面外，另外三堵墙，都是和地面一一样宽，但是因为墙面的位置不一样，所以是两面墙和地面一样宽，另外两面墙和地面一样长，因为Threejs默认的位置是这个模型的中心点，所以设置墙面的时候应该是墙面长度的一半，先不考虑门的话，可以先这样写：
createCubeWall() {
let materialTie = new THREE.MeshPhysicalMaterial({color: '#BBBBBB'}); //前 0xafc0ca :灰色
let textureWall = new THREE.TextureLoader().load('/static/images/wall.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
})
materialTie.map = textureWall
let wallList = []
let wall1 = {width:this.floor.floorLength, height:2, depth:this.wallHeight, angle:0, matArrayB:materialTie, x:this.floor.floorLength/2, y:0, z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall2 = {width:this.floor.floorLength, height:2, depth:this.wallHeight, angle:1, matArrayB:materialTie, x:this.floor.floorLength/2, y:this.floor.floorWidth, z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall3 = {width:this.floor.floorWidth, height:2, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:0, y:(this.floor.floorWidth/2), z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall4 = {width:this.floor.floorWidth, height:2, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:this.floor.floorLength, y:(this.floor.floorWidth/2), z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
wallList.push(wall1);wallList.push(wall2);wallList.push(wall3);wallList.push(wall4);
for(let i=0;i<wallList.length;i++){
let cubeGeometry = new THREE.BoxGeometry(wallList[i].width, wallList[i].height, wallList[i].depth);
let cube = new THREE.Mesh(cubeGeometry, wallList[i].matArrayB);
cube.position.x = wallList[i].x;
cube.position.y = wallList[i].y;
cube.position.z = wallList[i].z;
cube.rotation.z += wallList[i].angle * Math.PI; //-逆时针旋转,+顺时针
cube.name = wallList[i].name;
this.scene.add(cube);
}
},
然后我们需要把其中一面墙拆成两个墙，且不连接，我们这里把wall4缩短，再添加出wall5，设置wall4长度减去40，但是wall5的长度一共20，这样可以留出20的宽度作为门的宽度，代码如下
//初始化墙壁
createCubeWall() {
let materialTie = new THREE.MeshPhysicalMaterial({color: '#BBBBBB'}); //前 0xafc0ca :灰色
let textureWall = new THREE.TextureLoader().load('/static/images/wall.jpg', function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
})
materialTie.map = textureWall
let wallList = []
let wall1 = {width:this.floor.floorLength, height:2, depth:this.wallHeight, angle:0, matArrayB:materialTie, x:this.floor.floorLength/2, y:0, z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall2 = {width:this.floor.floorLength, height:2, depth:this.wallHeight, angle:1, matArrayB:materialTie, x:this.floor.floorLength/2, y:this.floor.floorWidth, z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall3 = {width:this.floor.floorWidth, height:2, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:0, y:(this.floor.floorWidth/2), z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall4 = {width:this.floor.floorWidth-40, height:2, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:this.floor.floorLength, y:(this.floor.floorWidth/2)+20, z:this.wallHeight/2-(this.wallHeight/2), name:"墙面"};
let wall5 = {width:20, height:2, depth:this.wallHeight, angle:1.5, matArrayB:materialTie, x:this.floor.floorLength, y:10, z:this.wallHeight/2-10, name:"墙面"};
wallList.push(wall1);wallList.push(wall2);wallList.push(wall3);wallList.push(wall4);
wallList.push(wall5);
for(let i=0;i<wallList.length;i++){
let cubeGeometry = new THREE.BoxGeometry(wallList[i].width, wallList[i].height, wallList[i].depth);
let cube = new THREE.Mesh(cubeGeometry, wallList[i].matArrayB);
cube.position.x = wallList[i].x;
cube.position.y = wallList[i].y;
cube.position.z = wallList[i].z;
cube.rotation.z += wallList[i].angle * Math.PI; //-逆时针旋转,+顺时针
cube.name = wallList[i].name;
this.scene.add(cube);
}
},
效果如下：
车间的绘制差不多就这样，算有个大概的雏形了
