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()
        }