Vue使用Three.js加载glTF模型的方法详解

npm install three

import * as Three from "three"

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 导入轨道模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls

<div id="container"></div>

mounted(){

  this.initScene()

  this.initContainer()

  this.initCamera()

  this.initRenderer()

  this.initControls()

},

methods:{

   initModelContainer() {

   this.model_container = document.getElementById("container");

   this.model_container.style.height = window.innerHeight + "px";

   this.model_container.style.width = window.innerWidth + "px";

   this.height = this.model_container.clientHeight;

   this.width = this.model_container.clientWidth;

  },

  initScene() {

   this.scene = new Three.Scene();

  },

  

  initCamera() {

    // 照相机

   this.camera = new Three.PerspectiveCamera(70, this.width / this.height, 0.01, 1000);

   this.camera.position.set(-100, 60, 0);

  },

  initRenderer() {

   this.renderer = new Three.WebGLRenderer({ antialias: true, alpha: true });

   this.renderer.setSize(this.width, this.height);

   // 兼容高清屏幕

   this.renderer.setPixelRatio(window.devicePixelRatio);

    // 消除canvas的外边框

   this.renderer.domElement.style.outline = "none";

   this.model_container.appendChild(this.renderer.domElement);

  },

  initControls() {

   this.orbitControls = new OrbitControls(

    this.camera,

    this.renderer.domElement

   );

   // 惯性

   this.orbitControls.enableDamping = true;

   // 动态阻尼系数

   this.orbitControls.dampingFactor = 0.25;

   // 缩放

   this.orbitControls.enableZoom = true;

   // 右键拖拽

   this.orbitControls.enablePan = true;

   // 水平旋转范围

   this.orbitControls.maxAzimuthAngle = Math.PI / 6;

   this.orbitControls.minAzimuthAngle = -Math.PI / 6;

   // 垂直旋转范围

   this.orbitControls.maxPolarAngle = Math.PI / 6;

   this.orbitControls.minPolarAngle = -Math.PI / 6;

  },

}

mounted(){

  this.loadModel()

},

methods:{

  loadModel(){

    let that = this

    // gltf模型加载器

    let loader = new GLTFLoader()

    return new Promise(function(resolve, reject){

      loader.load(

        // 模型在 /public/static/building/文件夹下

        "static/building/scene.gltf",

        gltf => {

          console.log(gltf)

          gltf.scene.traverse(object => {

            // 修改模型材质

            let material = ...

            object.material = material

          })

          let group = new Three.Group()

          group.add(gltf.scene)

          let box = new Three.Box3()

          box.setFromObject(group)

          let wrapper = new Three.Object3D()

          wrapper.add(group)

          // 根据自己模型的大小设置位置

          wrapper.position.set(100, -300, 120)

          // 将模型加入到场景中 ! important

          that.scene.add(wrapper)

        },

        xhr => {

          // 模型加载期间的回调函数

          console.log(`${(xhr.loaded / xhr.total) * 100% building model loaded`

      );

        },

        error => {

          // 模型加载出错的回调函数

          console.log("error while loading", error);

          reject("load model error", error);

        }

      )

    })

  }

}