npm install three --save 

npm install three-obj-mtl-loader 

npm install three-orbit-controls  

import * as THREE from "three";  //引入three.js  

import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";   //引入加载外部模型

const OrbitControls = require("three-orbit-controls")(THREE);  //引入控制器

data() {

    return {

      scene: null, // 场景

      camera: null, // 相机

      renderer: null, // 渲染

      controls: null, // 控制器

    };

  },

//初始化环境

    initScene() {

      this.scene = new THREE.Scene();

      var axesHelper = new THREE.AxesHelper(15); // 建立xyz坐标轴,红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.长度15

      this.scene.add(axesHelper);

      var AmbientLight = new THREE.AmbientLight(0xc0560c); // 环境光

      this.scene.add(AmbientLight);

      let DirectionalLight = new THREE.DirectionalLight(0xdfebff, 0.45); // 平行光

      this.scene.add(DirectionalLight);

    },    

// 初始化相机

    initCamera() {

      this.camera = new THREE.PerspectiveCamera(

        75,

        window.innerWidth / window.innerHeight,

        0.1,

        1000

      );

      this.camera.position.set(50, 50, 50); // 调整相机方位

      this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点

    },

    // 初始化加载器

    initRenderer() {

      this.renderer = new THREE.WebGLRenderer();

      let container = document.getElementById("container");

      this.renderer.setSize(container.offsetWidth, container.offsetHeight);

      this.renderer.setClearColor(0xffd2ff, 1.0); // 背景光

      container.appendChild(this.renderer.domElement);

    },    

// 加载初始化

    init() {

      this.initScene();

      this.initCamera();

      this.initRenderer();

    },

    // 刷新动画

    animate() {  

    // requestAnimationFrame 应运而生，它采用的是系统时间间隔(约16.7ms)，保持最佳绘制效果与效率，

      // 使各种网页动画有一个统一的刷新机制，从而节省系统资源，提高系统性能。

      requestAnimationFrame(this.animate);

      this.renderer.render(this.scene, this.camera);

    },

mounted() {

    this.init();

    this.animate();

  },

    loadMTL() {

      let that = this;

      let mtlLoader = new MTLLoader();

      let objloader = new OBJLoader();

      mtlLoader.load(`/static/model/car/file.mtl`, function (materials) {

        materials.preload();

        objloader.load("/static/model/car/file.obj", function (obj) {

          obj.position.set(0, -20, 0); // 平移位置

          that.scene.add(obj);

        });

      });

    },

    initOrbitControls() {

      let controls = new OrbitControls(this.camera, this.renderer.domElement);

      controls.enableDamping = true; // 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。

      controls.enableZoom = true; // 启用或禁用摄像机的缩放。

      controls.autoRotate = false; // 将其设为true，以自动围绕目标旋转。

      controls.autoRotateSpeed = 3; // 当 .autoRotate : Boolean为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一次需要30秒。

      controls.enablePan = true; // 启用或禁用摄像机平移，默认为true。

      controls.enableKeys = true; // 启用或禁用键盘控制。

      controls.keyPanSpeed = 7; // 当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。

      controls.keys = {

        // 这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。

        LEFT: 37,

        UP: 38,

        RIGHT: 39,

        BOTTOM: 40,

      };

// 刷新动画

    animate() {

      requestAnimationFrame(this.animate);

      this.controls.update();

      this.renderer.render(this.scene, this.camera);

    },