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