three.js 引用外部模型，並使用其綁定的動畫(梳理)

1. 各元素綁定規則

頁面元素，渲染器，場景，燈光，相機，控制器，模型

 

頁面元素獲取

const container = document.getElementById("container");

 

渲染器 -> 頁面元素 

container.appendChild(this.renderer.domElement);

 

場景，相機 -> 渲染器

this.renderer.render(this.scene, this.camera);

 

 

燈光，模型 -> 場景

this.scene.add(this.light);

this.scene.add(mesh);

 

控制器 -> 相機，渲染器

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

 

2. 動作調用順序

獲取動畫列表，選擇執行的動畫 -> 創建 AnimationMixer（動畫混合器）獲取動畫剪輯 -> 動畫執行控制

      loader.load("static/jigui.glb", (data) => {
        // console.log(data)
        let mesh = data.scene;
        mesh.position.set(0, 0.1, 0);
        mesh.name = 'robot'
        this.scene.add(mesh); // 將模型引入three

        // 加入圖形控制組件
        // this.createGUI( mesh, data.animations );

        this.animationClipList = data.animations
        this.setAnimation()

        this.render();
      });

      let animationClip = this.animationClipList.find(animationClip => animationClip.name == name )         // 方法中篩選指定動作，未單獨封裝方法不需要

      animationActionList[name] = this.animationMixer.clipAction(animationClip)                             // 傳入參數為指定要調用的動作

        let action = animationActionList[]// 判斷元素被點擊，並且該點擊動作還未觸發，觸發動作，若已觸發動作停止動作
        if( hasClick.length > 0 && action.isRunning () ){
          action.stop()
        } else if( hasClick.length > 0 ) {
          action.play()
        }