学习babylon.js --- [2] 项目工程搭建

本文讲述如何搭建babylonjs的项目工程。

一准备

首先创建一个目录叫MyProject，然后在这个目录里再创建三个目录：dist，public和src，如下，

接着在src目录里添加一个文件叫app.ts，本文使用typescript；在public目录下添加index.html，index.html内容如下，

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Babylon Tutorial</title>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    </body>
</html>

最后回到MyProject目录下执行下面命令来产生package.json，

bash 复制代码

npm init

一路回车就行了。

由于本文使用typescript，所以在MyProject目录下还要执行下面的命令，

bash 复制代码

tsc --init

执行完后会产生tsconfig.json，打开这个文件然后替换成以下内容，

typescript 复制代码

{
  "compilerOptions": {
    "target": "es6",
    "module": "ESNext",
    "moduleResolution": "node",
    "noResolve": false,
    "noImplicitAny": false,
    "sourceMap": true,
    "preserveConstEnums":true,
    "lib": [
        "dom",
        "es6"
    ],
    "rootDir": "src"
  }
}

注意其中的"rootDir"，其值是我们的src目录。

最后形成的目录如下，

二安装webpack并配置

webpack是现代JavaScript 应用程序的静态模块打包工具，方便我们发布程序。在MyProject目录下，使用以下命令进行安装，

bash 复制代码

npm install --save-dev webpack ts-loader webpack-cli

另外再安装2个插件，如下，

bash 复制代码

npm install --save-dev html-webpack-plugin
npm install --save-dev webpack-dev-server

在运行程序后，如果有修改，这2个插件可以让程序自动更新，便于调试。

安装完毕之后，在MyProject目录下创建webpack.config.js，内容如下，

javascript 复制代码

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方式来安装，

bash 复制代码

npm install @babylonjs/core

安装完之后使用npm list来查看当前工程下安装的package，

注意这些package都是在当前工程下有效，不是全局安装的。如果需要全局安装，需要自行设置下。

四准备app.ts

这里推荐使用VS Code来打开MyProject目录，然后把以下内容拷贝进去，

typescript 复制代码

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"，如下，

然后替换成如下语句，

typescript 复制代码

"scripts": {
        "build": "webpack",
        "start": "webpack-dev-server --port 8080"
    },

接着构建并运行server，执行以下2个命令即可，

bash 复制代码

npm run build
npm run start

执行过程如下，

最后打开浏览器，地址栏输入127.0.0.1:8080并回车，可以看到如下效果，鼠标左键按着不放然后移动，可以看到变化

此时打开dist目录，可以看到生成的文件符合之前的设置，

打开index.html，可以看到其引入了生成的bundleName.js

六总结

本文讲述了如何搭建babylonjs的项目工程，也是参考的官方文档，略有改动。

学习babylon.js --- [2] 项目工程搭建

一 准备

二 安装webpack并配置

三 安装babylonjs

四 准备app.ts

五 打包项目并运行

六 总结

一准备

二安装webpack并配置

三安装babylonjs

四准备app.ts

五打包项目并运行

六总结