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

1.第一步，安装依赖包

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

2.第二步，配置文件，vue-cli3.0之后没有了webpack.base.conf.js，需要在根目录下的vue.config.js进行配置

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        // OrbitControls.js库使用
        {
          test: require.resolve('three/examples/js/controls/OrbitControls'),
          use: 'imports-loader?THREE=three'
        },
        {
          test: require.resolve('three/examples/js/controls/OrbitControls'),
          use: 'exports-loader?THREE.OrbitControls'
        },
        // CSS2DRenderer.js库使用
        {
          test: require.resolve('three/examples/js/renderers/CSS2DRenderer.js'),
          use: 'imports-loader?THREE=three'
        },
        {
          test: require.resolve('three/examples/js/renderers/CSS2DRenderer.js'),
          use: 'exports-loader?THREE.CSS2DRenderer'
        },
        // OBJLoader.js库使用
        {
          test: require.resolve('three/examples/js/loaders/OBJLoader.js'),
          use: 'imports-loader?THREE=three'
        },
        {
          test: require.resolve('three/examples/js/loaders/OBJLoader.js'),
          use: 'exports-loader?THREE.OBJLoader'
        }]
    }
  }
｝

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

<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>