ThreeJs绘制车间场景二

  上一节已经把产线的基本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)
    },

<