three.js如何实现模型渲染，动画解析加载？

<template>
  <div id="model"></div>
</template>
<script>
import * as THREE from "three";
import {
    
     OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
    
     FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
export default {
    
    
  data() {
    
    
    return {
    
    
      camera: null,
      scene: null,
      renderer: null,
      controls: null,
      modelPath: "/model/Zombie Walk.fbx"
    };
  },
  methods: {
    
    
    init() {
    
    
      let self = this;
      let container = document.getElementById("model");
      let mouse = new THREE.Vector2();
      self.camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.01,
        2000
      );
      self.camera.position.set(100, 200, 300);
      self.scene = new THREE.Scene();


      // ground
      var mesh = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(2000, 2000),
        new THREE.MeshPhongMaterial({
    
     color: 0x999999, depthWrite: false })
      );
      mesh.rotation.x = -Math.PI / 2;
      mesh.receiveShadow = true;
      self.scene.add(mesh);

      //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(200, 200, 300); //点光源位置
      self.scene.add(point); //点光源添加到场景中
      // 点光源2  位置和point关于原点对称
      var point2 = new THREE.PointLight(0xffffff);
      point2.position.set(-400, -200, -300); //点光源位置
      self.scene.add(point2); //点光源添加到场景中

      // 环境光
      var ambient = new THREE.AmbientLight(0xffffff);
      self.scene.add(ambient);



      var grid = new THREE.GridHelper(2000, 30, 0x000000, 0x00FF7F);//创建网格底栏
      grid.material.opacity = 0.2;
      grid.material.transparent = true;
      self.scene.add(grid);

      self.renderer = new THREE.WebGLRenderer({
    
    
        antialias: true,
        alpha: true,
        precision: "highp"
      });

      // self.renderer.setClearColor(new THREE.Color(0xff00ff));
      self.renderer.shadowMapEnabled = true; // 启用阴影选项
      self.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(self.renderer.domElement)

      self.controls = new OrbitControls(self.camera, self.renderer.domElement);
      self.controls.target.set(0, 100, 0);
      self.controls.update();

      var light = new THREE.HemisphereLight(0xffffff, 0x444444);//创建半球光光源
      light.position.set(0, 200, 0);
      self.scene.add(light);


      light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, 200, 100);
      light.castShadow = true;
      light.shadow.camera.top = 180;
      light.shadow.camera.bottom = -100;
      light.shadow.camera.left = -120;
      light.shadow.camera.right = 120;
      self.scene.add(light);


      var mixer = null;//声明一个混合器变量
      let fbxLoader = new FBXLoader();//创建一个FBX加载器
      fbxLoader.load(self.modelPath, function (object) {
    
    
        self.scene.add(object);
        object.castShadow = true;
        // obj作为参数创建一个混合器，解析播放obj及其子对象包含的动画数据
        mixer = new THREE.AnimationMixer(object);
        // 查看动画数据
        console.log('动画数据', object.animations)
        // obj.animations[0]：获得剪辑对象clip
        var AnimationAction = mixer.clipAction(object.animations[0]);
        AnimationAction.play();//播放动画

      });
      // 创建一个时钟对象Clock
      var clock = new THREE.Clock();
      // 渲染函数
      function render() {
    
    
        self.renderer.render(self.scene, self.camera); //执行渲染操作
        requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

        if (mixer !== null) {
    
    
          //clock.getDelta()方法获得两帧的时间间隔
          // 更新混合器相关的时间
          mixer.update(clock.getDelta());
        }
      }
      render();

    },

  },
  mounted() {
    
    
    this.init();
  }
};
</script>
<style  scoped>
#model {
    
    
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(red, yellow, green);
}
</style>