如何使用ES6开发Three.js项目(一)

如何使用ES6开发Three.js项目(一)

如何使用ES6开发Three.js项目(二)

配置开发环境:node.js+webpack+webpack-dev-server+babel+ES6+three.js

  1. node.js
  2. webpack
  3. webpack-dev-server
  4. babel
  5. ES6
  6. 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、通过传统的方式<script type="text/javascript" src="orbitcontrols.js"></script>

4、在index.js文件中引入dat.GUI.js模块。

不是通过npm安装的所以不能直接以模块的方式引用。可以通过传统的方式引用:<script type="text/javascript" src="dat.gui.min.js"></script>。如果通过模块的方式需要在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、通过<script type="text/javascript" src="xxxx.js"></script>的方式xxx.js文件不会被打包。这样在开发过程中也方便,不然每次都需要打包库文件。我的破电脑每次打包速度都很慢。还是暂时放弃打包three.js等库文件吧,只打包自己用ES6编写的代码就好了。 

可以配置 --hot 再进行文件修改,它会在再次修改文件的时候也修改打包好的文件,而不是重新打包一个完整的文件,从而提高速度。

6、安装babel来编译es6语法。

这样就可以把之前的three.js的代码。通过 es6 、 webpack 的方式打开了。

7、静态的html文件。我们把需要引入的库文件放在head中,把打包生成的bundle.js文件放在body中就好了。这样我们用浏览器打开html文件就可以看到我们的案例了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>node.js-es6-Webpack-three.js</title>
    <script src="./src/three.js"></script>
    <style>
        body{margin: 0;overflow: hidden;}
    </style>
</head>
<body>
   <script src="./dist/bundle.js"></script>
</body>
</html>

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项目(二)

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值