1、vue-cli安装three.js扩展控件orbitControls.js

npm install three --save -dev

npm i imports-loader exports-loader --save -dev

2、配置文件，vue-cli3.0之后没有了webpack.base.conf.js，需要在根目录下新建vue.config.js进行配置。注意是新建这个文件，然后放入如下内容。

<script>
import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

export default {
  data() {
    return {
      renderer: null,
      controls: null
    }
  },
  mounted() {
    this.init()
    this.render()
  },
  methods: {
    init() {
      /**
     * 创建控件对象
     */
      this.controls = new OrbitControls(this.camera, this.renderer.domElement) // 创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
      // 动态阻尼系数 就是鼠标拖拽旋转灵敏度，阻尼越小越灵敏
      this.controls.dampingFactor = 0.5
      // 是否可以缩放
      this.controls.enableZoom = true
      // 是否自动旋转
      this.controls.autoRotate = false
      // 设置相机距离原点的最近距离
      this.controls.minDistance = 20
      // 设置相机距离原点的最远距离
      this.controls.maxDistance = 1000
      // 是否开启右键拖拽
      this.controls.enablePan = true
      // 上下翻转的最大角度
      this.controls.maxPolarAngle = 1.5
      // 上下翻转的最小角度
      this.controls.minPolarAngle = 0.0
      // 是否可以旋转
      this.enableRotate = true
    },
    // 渲染
    render() {
      this.controls.addEventListener('change', this.render)// 监听鼠标事件，触发渲染函数
    }
  }
}
</script>

3.第三步，在使用的.vue文件引入要使用的模块

import * as Three from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

4、遇到问题
出现一个黑斑，不知道是什么原因。
解决办法：
盒子设置得太大了，相机的最远距离设置过小，导致黑色块出现。调整相机最远距离，问题解决。

出现黑色斑块