这个问题还没解决！

用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都删除了，就会返现没有警告了。