這個(gè)問(wèn)題還沒(méi)解決！

用Vue.js 重構(gòu)項(xiàng)目的時(shí)候，引入three.js和其他相關(guān)的東西的時(shí)候會(huì)出現(xiàn)上面的警告。今天就說(shuō)一下這個(gè)解決辦法，但是我覺(jué)得這個(gè)方法不一定適用所有的項(xiàng)目。

一、引入THREE

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

import * as THREE from 'three'

這個(gè)時(shí)候還需要引入其他three.js 的方法。比如?STLLoader.js，因?yàn)橛行┪募?npm 官方庫(kù)里面沒(méi)有或者版本不同，所以我直接從官網(wǎng)的例子里面直接拷貝文件到項(xiàng)目直接引用。因?yàn)檫@些函數(shù)直接在THREE對(duì)象上添加的方法，所以我猜測(cè)直接引入就可以添加到THREE上面，所以我就直接用 import ''路徑/STLLoader.js" 引入文件，這個(gè)時(shí)候就報(bào)錯(cuò)了，如下圖。

因?yàn)槿肿兞繘](méi)有THREE，所以接下來(lái)就開(kāi)始怎么處理THREE變量全局化。

二、THREE變量全局化

THREE全局化有兩種方法，

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

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

這種方法確實(shí)可以但是在我項(xiàng)目里面會(huì)出現(xiàn)一個(gè)問(wèn)題。就是 CSS3DObject，方法找不到。

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

window.THREE = THREE

THREE變量全局化解決了，開(kāi)始引入其他函數(shù)。

三、warnings 的出現(xiàn)和解決

因?yàn)檫@些函數(shù)是在不同的 .vue組件里面用，所以分開(kāi)來(lái)引入這些函數(shù)了。分開(kāi)來(lái)引入的的時(shí)候，還是有寫(xiě)THREE變量未定義，所以我就又在STLLoader.js 引入 THREE。

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

這個(gè)時(shí)候就出現(xiàn)了標(biāo)題的問(wèn)題了。最后發(fā)現(xiàn)是加載順序的問(wèn)題。

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

這個(gè)時(shí)候發(fā)現(xiàn)是引入文件的順序出了問(wèn)題，就是?STLLoader 先加載了， THREE 后加載。這個(gè)時(shí)候把 THREE的加載放在App.vue里面，然后把其他文件里面的 import * as {THREE} from 'three都刪除了，就會(huì)返現(xiàn)沒(méi)有警告了。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。