three.js的使用（mtl和obj模型，glb模型）和优化

<template>
  <div class="three">
    <div id="three_div"></div>
  </div>
</template>
<script>
import * as THREE from "three";
//import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";//obj
//const OrbitControls = require("three-orbit-controls")(THREE);//obj
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";//gltf
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";//gltf
export default {
  name: "three",
  data () {
    return {
      scene: null,
      camera: null,
      renderer: null,
      renderEnabled: true,
      timer: null,
      objectModal: null,
    };
  },
  beforeDestroy () {
    this.clearCache(this.objectModal);//清除模型
    this.clearRenderer()//清除模型
    window.removeEventListener('resize', this.ResizeFun, false)//监听页面的变化
  },
  methods: {
    ResizeFun () {
      let container = document.getElementById("three_div");
      this.camera.aspect = container.clientWidth / container.clientHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(container.clientWidth, container.clientHeight);
    },
    timeRender () {
      this.renderEnabled = true;
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer= setTimeout(() => {
        this.renderEnabled = false;
      }, 3000)
    },
    clearCache (obj) {
       obj.geometry.dispose();
        obj.material.dispose();
      
    },
    clearRenderer () {
      if (this.renderer) {
        this.renderer.dispose();
        this.renderer.forceContextLoss();
        this.renderer.context = null;
        this.renderer.domElement = null;
        this.renderer = null;
      }

    },
    // 初始化场景
    init () {
      let container = document.getElementById("three_div");
        //场景
      this.scene = new THREE.Scene();
        //相机
      this.camera = new THREE.PerspectiveCamera(
        50,
        container.clientWidth / container.clientHeight,
        1,
        1200
      );
      this.camera.position.set(150, 315, 148);
       // 渲染器
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.renderer.setClearColor(0xeeeeee, 0);
      container.appendChild(this.renderer.domElement);
      //控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.addEventListener('change', () => {
        this.timeRender();
      });//监听页面的缩放，拖拽，旋转
      this.controls.target.set(0, 0, 0);
      this.controls.minDistance = 80;
      this.controls.maxDistance = 400;
      this.controls.maxPolarAngle = Math.PI / 3;//设置可旋转的范围
      this.controls.enablePan = true;//是否可拖拽
      this.controls.update();
      // 三维坐标轴
      // var axis = new THREE.AxisHelper(3);//定位中心点
      // this.scene.add(axis);
    },
    // 加载模型obj+mtl
    loadObj () {
      let manager = new THREE.LoadingManager();
        /*vue-cli2.x 的静态模型模型放在static/demo.mtl，vue-cli3.x以上放在public/static/demo.mtl*/
      new MTLLoader(manager).load("/static/demo.mtl", (materials) => {
        materials.preload();
        new OBJLoader(manager)
          .setMaterials(materials).load("/static/demo.obj", (obj) => {
            //初始展示的模型的缩放比例
            obj.scale.set(1, 1, 1);
            this.objectModal = obj;
            this.scene.add(obj);
            this.timeRender();
          });
      });
    },
//加载gltf模型
    loadgltf () {
      let that = this;
      let loader = new GLTFLoader()
      return new Promise(function () {
        loader.load('/demo.glb', (gltf) => {
          gltf.scene.scale.set(1, 1, 1)
          that.objectModal = gltf;
          that.scene.add(gltf.scene)
          that.timeRender();
        })
      })
    },
    // 灯光
    light () {
      let ambientLight = new THREE.AmbientLight(0x999999); //环境光
      this.scene.add(ambientLight);
      var directionalLight = new THREE.DirectionalLight(0xfffffe, 0.36);//点散光
      directionalLight.position.set(50, 200, 100);
      directionalLight.position.multiplyScalar(0.3);
      this.scene.add(directionalLight);
    },
    // 动画效果
    animate () {
      if (this.renderEnabled) {
        if (this.renderer) {
          this.renderer.render(this.scene, this.camera);
        }
      }
      requestAnimationFrame(this.animate);
    },
  },
  mounted () {
    this.init();
    this.light();
    // this.loadObj();
    this.loadgltf();
    this.animate();
    // window.addEventListener('resize', this.ResizeFun, false)
  },
};
</script>

<style>
.three{
  color: #ffffff;
}
#three_div {
  width: 100px;
  height: 100px;
}
</style>