学习babylon.js --- [2] 项目工程搭建
本文讲述如何搭建babylonjs的项目工程。
一 准备
首先创建一个目录叫MyProject，然后在这个目录里再创建三个目录：dist，public和src，如下，
![学习babylon.js --- [2] 项目工程搭建_第1张图片](http://img.e-com-net.com/image/info8/9ce5d4387d3141a398c211a6f69e4c12.jpg)
接着在src目录里添加一个文件叫app.ts，本文使用typescript；在public目录下添加index.html，index.html内容如下，
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Babylon Tutorialtitle>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
style>
head>
<body>
body>
html>
最后回到MyProject目录下执行下面命令来产生package.json，
npm init
一路回车就行了。
由于本文使用typescript，所以在MyProject目录下还要执行下面的命令，
tsc --init
执行完后会产生tsconfig.json，打开这个文件然后替换成以下内容，
{
"compilerOptions": {
"target": "es6",
"module": "ESNext",
"moduleResolution": "node",
"noResolve": false,
"noImplicitAny": false,
"sourceMap": true,
"preserveConstEnums":true,
"lib": [
"dom",
"es6"
],
"rootDir": "src"
}
}
注意其中的"rootDir"，其值是我们的src目录。
最后形成的目录如下，
![学习babylon.js --- [2] 项目工程搭建_第2张图片](http://img.e-com-net.com/image/info8/e5d0a605b7054a279140f54ae870734b.jpg)
二 安装webpack并配置
webpack是现代JavaScript 应用程序的静态模块打包工具，方便我们发布程序。在MyProject目录下，使用以下命令进行安装，
npm install --save-dev webpack ts-loader webpack-cli
另外再安装2个插件，如下，
npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server
在运行程序后，如果有修改，这2个插件可以让程序自动更新，便于调试。
安装完毕之后，在MyProject目录下创建webpack.config.js，内容如下，
const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());
module.exports = {
entry: path.resolve(appDirectory, "src/app.ts"), //path to the main.ts file
output: {
filename: "js/bundleName.js", //name for the js file that is created/compiled in memory
clean: true,
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
devServer: {
host: "0.0.0.0",
port: 8080, //port that we're using for local host (localhost:8080)
static: path.resolve(appDirectory, "public"), //tells webpack to serve from the public folder
hot: true,
devMiddleware: {
publicPath: "/",
}
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(appDirectory, "public/index.html"),
})
],
mode: "development",
};
第3行引入了html-webpack-plugin，就是刚才安装的插件之一，然后来看下module.exports，
- entry指定了要执行的ts文件，这里是src/app.ts
- output里的filename用于指定app.ts经过tsc编译后产生的js文件名，这里是bundleName.js，位置是js目录，而js目录是位于dist目录下，到时会自动创建
- devServer指定了程序运行后的服务器地址，这里是localhost:8080，"static"是指服务器的运行起始目录，这里是public目录，可以让服务器加载静态文件
- plugins里创建HtmlWebpackPlugin的对象，其template参数指向public/index.html
HTML Webpack插件可以把打包好的js文件注入到dist目录下的index.html里。
三 安装babylonjs
可以参考第一篇文章第二节，按照需要的方式来安装。注意要在项目根目录下进行安装，即MyProject，这里使用ES6方式来安装，
npm install @babylonjs/core
安装完之后使用npm list来查看当前工程下安装的package，
![学习babylon.js --- [2] 项目工程搭建_第3张图片](http://img.e-com-net.com/image/info8/074ac8bb2dbf4ed29c2f021bc02cd2f6.jpg)
注意这些package都是在当前工程下有效，不是全局安装的。如果需要全局安装，需要自行设置下。
四 准备app.ts
这里推荐使用VS Code来打开MyProject目录，然后把以下内容拷贝进去，
import * as BABYLON from "@babylonjs/core"
class App {
constructor() {
// create the canvas html element and attach it to the webpage
var canvas = document.createElement("canvas");
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.id = "gameCanvas";
document.body.appendChild(canvas);
// initialize babylon scene and engine
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera: BABYLON.ArcRotateCamera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light1: BABYLON.HemisphericLight = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var sphere: BABYLON.Mesh = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
// hide/show the Inspector
window.addEventListener("keydown", (ev) => {
// Shift+Ctrl+Alt+I
if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.key === 'i') {
if (scene.debugLayer.isVisible()) {
scene.debugLayer.hide();
} else {
scene.debugLayer.show();
}
}
});
// run the main render loop
engine.runRenderLoop(() => {
scene.render();
});
}
}
new App();
五 打包项目并运行
打开package.json，找到"scripts"，如下，
![学习babylon.js --- [2] 项目工程搭建_第4张图片](http://img.e-com-net.com/image/info8/9b38cc599ab246b786ff17aed6e2ce87.jpg)
然后替换成如下语句，
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --port 8080"
},
接着构建并运行server，执行以下2个命令即可，
npm run build
npm run start
执行过程如下，
![学习babylon.js --- [2] 项目工程搭建_第5张图片](http://img.e-com-net.com/image/info8/f9fadd8ce0644e2abc78588a87b9e701.jpg)
最后打开浏览器，地址栏输入127.0.0.1:8080并回车，可以看到如下效果，鼠标左键按着不放然后移动，可以看到变化
![学习babylon.js --- [2] 项目工程搭建_第6张图片](http://img.e-com-net.com/image/info8/b322b8d9041943508a75751cf92c65aa.jpg)
此时打开dist目录，可以看到生成的文件符合之前的设置，
![学习babylon.js --- [2] 项目工程搭建_第7张图片](http://img.e-com-net.com/image/info8/8ee1d8108c6f47819b428be7a354db4d.jpg)
打开index.html，可以看到其引入了生成的bundleName.js
![学习babylon.js --- [2] 项目工程搭建_第8张图片](http://img.e-com-net.com/image/info8/ecb47cd3506742498b7db3faeff8d965.jpg)
六 总结
本文讲述了如何搭建babylonjs的项目工程，也是参考的官方文档，略有改动。