vue中加載three.js的gltf模型

 

vue中加載three.js的gltf模型

 

一、開始引入three.js相關插件。首先利用淘寶鏡像，操作命令為：

　cnpm install three     //npm install three也行

二、three.js中所有的控件插件，都可以在node_modules下面的three里面找到

　　

三、安裝好以后，在頁面中引入three.js並使用；在所調用頁面引入的代碼為

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

 

 

  mounted() {
    this.init();
    this.render();
  },
methods:{
 // 模型初始化
    init() {
      let container = document.getElementById("container");
      // 設置相機
      this.camera = new THREE.PerspectiveCamera(
        70,
        container.clientWidth / container.clientHeight,
        0.1,
        10
      );

      this.camera.position.z = 2;
      this.scene = new THREE.Scene();
      let self = this;
      // 加載模型
      var loader = new GLTFLoader().setPath("/static/dalou/");
      loader.load("lou_danti.gltf", function(gltf) {
        var mesh = gltf.scene.children[0];
        mesh.scale.set(10, 10, 10);
        self.scene.add(mesh); // 將模型引入three
        console.log(gltf, "gltf");

        // 調用動畫
        self.mixer = new THREE.AnimationMixer(mesh);
        var action = self.mixer.clipAction(gltf.animations[0]);
        action
          .stop()
          .setDuration(4)
          .play();
      });
      this.scene.add(loader);

      /*
        添加光源
      */
      //點光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //點光源位置
      this.scene.add(point); //點光源添加到場景中
      //環境光
      var ambient = new THREE.AmbientLight(0x999999);
      this.scene.add(ambient);
      /**
       * 相機設置
       */
      var width = window.innerWidth; //窗口寬度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口寬高比
      var s = 150; //三維場景顯示范圍控制系數，系數越大，顯示的范圍越大

      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    },
    render() {
      requestAnimationFrame(this.render);
      this.renderer.render(this.scene, this.camera); //執行渲染操作
      var time = this.clock.getDelta();
      if (this.mixer) {
        this.mixer.update(time);
      }
    }
}

  　　　　

　　如果有問題，可以加群討論