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

終於可以去控制模型縮放旋轉了[淚奔]