這個問題還沒解決！

用Vue.js 重構項目的時候，引入three.js和其他相關的東西的時候會出現上面的警告。今天就說一下這個解決辦法，但是我覺得這個方法不一定適用所有的項目。

一、引入THREE

首先用 npm 安裝了 three, 然后再項目里面引入了。如下代碼所示。

import * as THREE from 'three'

這個時候還需要引入其他three.js 的方法。比如?STLLoader.js，因為有些文件 npm 官方庫里面沒有或者版本不同，所以我直接從官網的例子里面直接拷貝文件到項目直接引用。因為這些函數直接在THREE對象上添加的方法，所以我猜測直接引入就可以添加到THREE上面，所以我就直接用 import ''路徑/STLLoader.js" 引入文件，這個時候就報錯了，如下圖。

因為全局變量沒有THREE，所以接下來就開始怎么處理THREE變量全局化。

二、THREE變量全局化

THREE全局化有兩種方法，

1是在webpack 里面添加全局變量。

plugins: [new webpack.ProvidePlugin({'THREE': require.resolve('three')})]

這種方法確實可以但是在我項目里面會出現一個問題。就是 CSS3DObject，方法找不到。

2 直接在 window全局變量上掛載 THREE，具體原理不再這里說了。

window.THREE = THREE

THREE變量全局化解決了，開始引入其他函數。

三、warnings 的出現和解決

因為這些函數是在不同的 .vue組件里面用，所以分開來引入這些函數了。分開來引入的的時候，還是有寫THREE變量未定義，所以我就又在STLLoader.js 引入 THREE。

import * as {THREE} from 'three' THREE.STLLoader = function ( manager ) {this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;};

這個時候就出現了標題的問題了。最后發現是加載順序的問題。

那么這些警告也確實夠煩人的，程序員不要說自己不行，所以要解決！！

這個時候發現是引入文件的順序出了問題，就是?STLLoader 先加載了， THREE 后加載。這個時候把 THREE的加載放在App.vue里面，然后把其他文件里面的 import * as {THREE} from 'three都刪除了，就會返現沒有警告了。

總結

以上是生活随笔為你收集整理的warnings (imported as 'THREE') was not found in 'three'的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。