vue+threejs通过OrbitControls控制模型

最近在学习threejs，因为都是在html写的，所以自己想结合vue去实现threejs的3D模型，然后遇到了许多坑[说多了都是泪]

其他的坑就不多说了

下面实现一下引入OrbitControls控制模型

参考了Beam007博主的方法

1. 安装imports-loader and exports-loader(用于向一个模块的作用域内注入变量、从模块中导出变量)

   npm install imports-loader and exports-loader
   

2. 配置webpack.base.conf.js文件(在其module中的rules[]中添加)

     {
       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'
     }
   

3. 需要使用的地方引入OrbitControls

   import OrbitControls from 'three/examples/js/controls/OrbitControls'
   //调用
   this.controls = new OrbitControls(this.camera, this.renderer.domElement);
   

终于可以去控制模型缩放旋转了[泪奔]