基于Vue 使用threejs导入gltf动画模型

被老师要求学习这个完全不懂的领域的知识,代码东拼西凑终于搞定了,可能写的不好,但这方面的教程很少 某CS**平台的教程都是互相抄,看着烦死.

<template>
  <div >
    <img src="/models/yunlog.png" alt />
  </div>
</template>
<script>
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
var clock = new THREE.Clock();
var AnimationAction=null;
var mixer=null;
export default {
  name: "vue-three",
  data() {
    return {
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: ""
    };
  },
  methods: {
    //初始化three.js相关内容
    init() {
      this.scene = new THREE.Scene();
      this.scene.add(new THREE.AmbientLight(0x999999)); //环境光
      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
      this.light.position.set(50, 200, 100);
      this.light.position.multiplyScalar(0.3);
      this.scene.add(this.light);
      //初始化相机
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      this.camera.position.set(-90, -90, -90);  
      //初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.target.set(-70, 0, 0);//------------------
      this.controls.minDistance = 80;
      this.controls.maxDistance = 400;
      this.controls.maxPolarAngle = Math.PI / 3;
      this.controls.update();
      //渲染
      this.renderer = new THREE.WebGLRenderer({
        alpha: true
      });
      this.renderer.setClearColor(0xffffff);
      this.renderer.setPixelRatio(window.devicePixelRatio); //为了兼容高清屏幕
      // this.renderer.setSize(window.innerWidth, window.innerHeight);
       this.renderer.setSize(window.innerWidth-600, window.innerHeight); //改成这样就可以居中

      const container = document.getElementById("container");
      container.appendChild(this.renderer.domElement);
      window.addEventListener("resize", this.onWindowResize, false); //添加窗口监听事件（resize-onresize即窗口或框架被重新调整大小）
    },
    //窗口监听函数
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    render()  {
      requestAnimationFrame(this.render);
     
    var delta = clock.getDelta();
                         if (mixer != null) {
                             mixer.update(delta);
                        };
      this.renderer.render(this.scene, this.camera);
      mixer.update(clock.getDelta());
    },
    //外部模型加载函数
    loadGltf() {
       let self = this;
      // 加载模型
      var loader = new GLTFLoader();
      loader.load("/models/gltf_v/scene.gltf", function(gltf) { //就是两个模型 这个是动态的,下面是静态的,这些从sketchfab上面下载即可
      // loader.load("/models/gltf/Duck.gltf", function(gltf) {
        var mesh = gltf.scene;
        mesh.scale.set(20,20,20);
        mesh.position.set(-70, 0, 0 );
 

        self.scene.add(mesh); // 将模型引入three
        console.log(gltf, "gltf");
        mixer = new THREE.AnimationMixer(mesh);
                          mixer.clipAction(gltf.animations[0]).play();
                                                                
                          render();
      });
      this.scene.add(loader);
    }
  },
  mounted() {
    this.init();
    this.loadGltf();
    this.render();
    window.that = this;
  }
};
</script>

<style scoped>
#container {
  width: 800px;
  margin: 0 auto;
  height: 600px;
  overflow: hidden;
}
</style>

gltf模型下载网站 sketchfab