ThreeJS绘制工厂搬运场景

        这篇文章主要以3D模型为主，通过blender绘制的模型，用Threejs加载到场景中，通过移动一些模型，做出动画效果，也是数字孪生中做常见的一种方式，但是缺点是需要建模人员辅助来制作，首先还是需要新建一个threejs的场景，包括场景，相机，渲染器等。

        另外这里因为是要创建工厂，所以需要绘制出地板，地板在之前的章节中都有做过，这里就直接添加上去了，然后将基础设施的场景通过Threejs加载出来，

代码如下：

initFactory(){
      const loader = new GLTFLoader()
      loader.load("/static/models/product/make.glb", (gltf) => {
        gltf.scene.scale.set(10,10,10)
        gltf.scene.position.set(0,0,18)
        gltf.scene.rotation.x = Math.PI/2
        gltf.scene.rotation.y = Math.PI/2
        this.scene.add(gltf.scene)   // 加入场景
      })
    },

如图:

然后需要在场景中添加车和产品物料，

initAgv(){
      const loader = new GLTFLoader()
      loader.load("/static/models/product/agv.glb", (gltf) => {
        this.agvModel = gltf.scene
        this.agvModel.scale.set(10,10,10)
        this.agvModel.position.set(-10,-94,3)
        this.agvModel.rotation.x = Math.PI/2
        this.agvModel.rotation.y = Math.PI/2
        this.agvModel.name = 'agv'
        this.scene.add(this.agvModel)   // 加入场景
      })
    },
    initBox() {
      const loader = new GLTFLoader()
      loader.load("/static/models/product/box.glb", (gltf) => {
        this.boxModel = gltf.scene
        this.boxModel.scale.set(10, 10, 10)
        this.boxModel.position.set(10, -94.5, 9)
        this.boxModel.rotation.x = Math.PI/2
        this.boxModel.rotation.y = Math.PI/2
        this.boxModel.name = 'box'
        this.scene.add(this.boxModel)   // 加入场景
      })
    },

        然后场景中就有了开叉车的人和产品，按照场景中的坐标，将车防止在传送带的开始位置，产品集装箱放在传送台的开头，

然后可以再添加一辆带车产品的叉车，在边上的路线区，为了让后期产品可以和叉车一起运动，这里做成group，将两个模型放到同一个group中，这样后期只需要移动这个group，那么叉车和产品就都可以运动了。

initAgvBox(){
      const loader = new GLTFLoader()
      loader.load("/static/models/product/agv.glb", (gltf) => {
        this.agvCopyModel = gltf.scene
        this.agvCopyModel.scale.set(10,10,10)
        this.agvCopyModel.position.set(-120,79,3)
        this.agvCopyModel.rotation.x = Math.PI/2
        this.agvCopyModel.rotation.y = Math.PI/2
        this.agvCopyModel.name = 'agvCopy'
        let group = new THREE.Group();
        group.add(this.agvCopyModel)
        loader.load("/static/models/product/box.glb", (gltf) => {
          this.boxCopyModel = gltf.scene
          this.boxCopyModel.scale.set(10,10,10)
          this.boxCopyModel.position.set(-105,76,3)
          this.boxCopyModel.rotation.x = Math.PI/2
          this.boxCopyModel.rotation.y = Math.PI/2
          this.boxCopyModel.name = 'boxCopy'
          this.scene.add(this.boxCopyModel)   // 加入场景
          group.add(this.boxCopyModel)
          group.name = 'agvBox'
          this.scene.add(group)
        })
      })
    },

最终再来设置下动画效果，这里让集装箱在传送带上运动起来，叉车带着货物在移动，这里使用简单的不断更新他们的位置的方式，

initAnimate() {
      this.stats.update();
      requestAnimationFrame(this.initAnimate);
      for (let i = 0; i < this.scene.children.length; i++) {
        if(this.scene.children[i].name === 'box'){
          this.scene.children[i].position.x = this.scene.children[i].position.x + 0.2
          if(this.scene.children[i].position.x > 150){
            this.scene.children[i].position.x = 10
          }
        }
      }

      for (let i = 0; i < this.scene.children.length; i++) {
        if(this.scene.children[i].name === 'agvBox'){
          this.scene.children[i].position.x = this.scene.children[i].position.x + 0.2
          if(this.scene.children[i].position.x > 120){
            this.scene.children[i].position.x = -80
          }
        }
      }
      this.renderer.render(this.scene, this.camera);
    },

最终效果如下：

搬运工厂web3D