基于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
巴特西

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

最新文章

热门文章
