引入ThreeJS模块并使用CanvasRenderer和Pro

环境：

• react
• webpack 2
• Three.js r91

问题描述：

• 在项目中使用import引入Three.js的模块
• 同时使用CanvasRenderer和Projector

如果只需引入ThreeJS模块到项目中，可以看官方文档Import via modules：
https://threejs.org/docs/#manual/introduction/Import-via-modules

但如果还要引用ThreeJS的examples/js/文件夹中一些文件，就会出现问题了。参考github上的一些讨论：
https://github.com/mrdoob/three.js/issues/9562
https://github.com/mrdoob/three.js/issues/10617
尝试了讨论中建议的import的方式引入CanvasRenderer和Projector（配置webpack的resolve.alias）但不成功。于是折中采用了require。

具体做法：

1. npm install --save three
2. 修改webpack.config.js

    plugins: [
        new webpack.ProvidePlugin({
          'THREE': 'three/build/three'
        }),
        ...
    ]
   

3. 引用three.js，CanvasRenderer和Projector

     import 'three'
     require("../../node_modules/three/examples/js/renderers/CanvasRenderer")  
     require("../../node_modules/three/examples/js/renderers/Projector")
   

不过我发现import 'three'会使打包后的js文件多出6M左右... ...
所以最后还是选择直接在HTML中用<script>引入three.min.js，减少页面加载的js文件大小。