如何使用ES6开发Three.js项目（一）
如何使用ES6开发Three.js项目（一）
如何使用ES6开发Three.js项目（二）
配置开发环境：node.js+webpack+webpack-dev-server+babel+ES6+three.js
- node.js
- webpack
- webpack-dev-server
- babel
- ES6
- three.js
1、使用npm安装three.js。注意安装命令是three不是three.js。因为three.js（0.77） 是老本版，已经更名为three了。
three.js的npm官网： https://www.npmjs.com/package/three （目前版本0.95）
npm install three --save
2、在index.js文件中引入 three.js模块
const THREE = require('three')
3.1、安装three后，example/js中有很多js插件，但是这些插件都不能直接引用。这里有几种方式可以使用他们。
通过模块方式引入OrbitControls控制器。这里有一个坑，需要修改一下。
这里有篇文章讨论了这个问题：https://github.com/mrdoob/three.js/issues/9562
修改原来的OrbitControls.js代码
在第一行添加：import * as THREE from "three"
把第一个 THREE.OrbitControls 替换成 let OrbitControls
其余的 THREE.OrbitControls 都替换成 OrbitControls
在最后添加一行：export default OrbitControls
在住函数中就可以正确引入了：import OrbitControls from "./util/OrbitControls"
3.2、通过npm 的方式引入 OrbitControls。npm中刚好有这个库，所以我们可以安装一下。
https://www.npmjs.com/package/three-orbitcontrols
npm install three
npm install three-orbitcontrols
3.3、通过传统的方式
4、在index.js文件中引入dat.GUI.js模块。
不是通过npm安装的所以不能直接以模块的方式引用。可以通过传统的方式引用：。如果通过模块的方式需要在dat.GUI.js文件末尾添加：module.exports = dat。在index.js文件头部添加：const dat = require('./dat.GUI')。
当然 我们也可以通过npm的方式来安装。 $ npm install --save dat.gui。
// CommonJS:
const dat = require('dat.gui');
// ES6:
import * as dat from 'dat.gui';
const gui = new dat.GUI();
5、通过的方式xxx.js文件不会被打包。这样在开发过程中也方便，不然每次都需要打包库文件。我的破电脑每次打包速度都很慢。还是暂时放弃打包three.js等库文件吧，只打包自己用ES6编写的代码就好了。
可以配置 --hot 再进行文件修改，它会在再次修改文件的时候也修改打包好的文件，而不是重新打包一个完整的文件，从而提高速度。
6、安装babel来编译es6语法。
这样就可以把之前的three.js的代码。通过 es6 、 webpack 的方式打开了。
7、静态的html文件。我们把需要引入的库文件放在head中，把打包生成的bundle.js文件放在body中就好了。这样我们用浏览器打开html文件就可以看到我们的案例了。
node.js-es6-Webpack-three.js
8、安装http-server。正常开发的案例都可以直接打开，但是有些我们需要服务器环境local host。方便快速浏览，可以安装一个http-server。启动服务就可以了默认但口号是8080。也可以通过命令修改端口。
http-server -p 8081
使用webpack-dev-server后 打包的文件 bundle.js是在内存中的。磁盘里面没有，真的没有，找了好久。
因为开启webpack-dev-server之后是所谓的热更新，生成的文件都在内存中，方便实时查看效果，如果想得到生成的文件，就需要关闭webpack-dev-server，再使用webpack编译一次了。也许有其他方法。
"test": "echo \"Error: no test specified\" && exit 1",
"deve": "webpack --mode development",
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
// npm 命令
npm run deve //这个是打包编译
npm run dev //这个是开启webpack-dev-server 会自动刷新。
webpack编译的文件居然跑shi dist/main.js文件中，不是说好的release/bundle.js。眼睛迷糊的没看见，又坑我好久，坑我太年轻。
上面写的有点不清晰。准备再整理一篇出来。下面先补充一点遇到的坑。
three.js 中webpack 图片的加载。
在之前的开发中使用纹理图片是这样加载的：
var maps1 = new THREE.TextureLoader().load('../img/mapd.jpg');
var geometry = new THREE.SphereGeometry(r-1.8 , 32, 32);
var material = new THREE.MeshPhongMaterial({
map: maps1,
});
var mesh = new THREE.Mesh(geometry, material);代码没有问题。但是在webpack开发中就出现了问题。这样写的图片没有被打包到webpack中去，所以运行的时候就找不到。除非把图片放在打包路径下面，但是这样做是错误的。治标不治本。正确写法应该是通过模块化的方式引用图片路径。通过require的方式引入图片。
let imgurl = require('./assets/mapd.jpg')
let maps1 = new THREE.TextureLoader().load(imgurl);
let geometry = new THREE.SphereGeometry(r, 32, 32);
let material = new THREE.MeshPhongMaterial({
map: maps1,
});
let mesh = new THREE.Mesh(geometry, material);图片加载存在异步问题。在ES6中有 async await 关键字，可以来用于异步加载，提前把需要加载的图片都放在缓存中，后面用到的时候直接拿来用，就可以了。
更新了一下，项目代码。
如何使用ES6开发Three.js项目（二）