ThreeJs绘制车间场景一

上节我们已经通过绘制两条长方体和多个圆柱体成功绘制出传送带，今天根据之前的传送带做个简单的工厂车间生产的demo，然后再不断完善它。

        首先分析下工厂生产有哪些部分组成，工厂内是产线，产线需要有设备，传送带以及生产的产品。但是为了避开建模的部分，设备可以先直接用一个长方体代替，传送带根据上节内容已经实现了，生产的产品也先用一个正方体代替，最终再做一个让产品在传送带上移动的动画就好了。首先还是要绘制场景，相机，灯光等，这部分就不放代码了，之前每个章节都有。

        我们先要绘制一条很长的传送带，贯穿整个生产线，作为产品移动的载体。代码如下

登录后复制

begin: { x: 0, y: 0, z: 0 },
initConveyor(x,y,z,width,conveyorLength){ //初始化传送带
      //初始化传送带
      let geometryLeft = new THREE.BoxGeometry(conveyorLength,1,1);//创建一个几何体
      let materialLeft = new THREE.MeshBasicMaterial({color:'#0000FF'});//创建材质
      let borderLeft = new THREE.Mesh(geometryLeft, materialLeft);//创建网格模型
      borderLeft.position.set(x,y+(width/2),z);
      this.scene.add(borderLeft);//添加到场景中

      let geometryRight = new THREE.BoxGeometry(conveyorLength,1,1);//创建一个几何体
      let materialRight = new THREE.MeshBasicMaterial({color:'#0000FF'});//创建材质
      let borderRight = new THREE.Mesh(geometryRight, materialRight);//创建网格模型
      borderRight.position.set(x ,