1、首先利用淘寶鏡像，操作命令為：

cnpm install three
2.接下來利用npm安裝軌道控件插件：

npm install three-orbit-controls
3.接下來安裝加載.obj和.mtl文件的插件：

npm i --save three-obj-mtl-loader
4.安裝渲染器插件：

npm i --save three-css2drender
5、安裝好以后，在頁面中引入three.js并使用，在所調(diào)用頁面引入的代碼為：

import * as Three from ‘three’
主要插件都已經(jīng)安裝完成了，接下來可以實現(xiàn)一個demo，測試three.js是否引入成功。頁面測試代碼如下：

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

  </div>
</template>

<script>
  import * as Three from 'three';
  import {OrbitControls} from 'three-orbit-controls';

  export default {
  name: 'App',
  data () {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
    methods:{
      init: function () {
        let container = document.getElementById('container')
        this.camera = new Three.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.01, 10)
        this.camera.position.z = 0.6
        this.scene = new Three.Scene()
        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2)
        let material = new Three.MeshNormalMaterial()
        this.mesh = new Three.Mesh(geometry, material)
        this.scene.add(this.mesh)

        this.renderer = new Three.WebGLRenderer({antialias: true})
        this.renderer.setSize(container.clientWidth, container.clientHeight)
        container.appendChild(this.renderer.domElement)
      },
      animate: function () {
        requestAnimationFrame(this.animate)
        this.mesh.rotation.x += 0.01
        this.mesh.rotation.y += 0.02
        this.renderer.render(this.scene, this.camera)
      }
    },
    mounted () {
      this.init()
      this.animate()
    }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#container {
  height: 400px;
}
</style>

運行效果圖：

QQ截圖20190322162900.png