基於Vue 使用threejs導入gltf動畫模型

被老師要求學習這個完全不懂的領域的知識,代碼東拼西湊終於搞定了,可能寫的不好,但這方面的教程很少 某CS**平台的教程都是互相抄,看着煩死.

<template>
  <div id="container">
    <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