设定

介绍

此设置过程基于NPM支持文档，可从Babylon.js和babylonjs Webpack示例项目入门入手，但进行了一些附加和修改。项目的设置可能是最困难的部分！

创建一个项目

首先，您需要设置项目要放置的位置。

使用您选择的文本编辑器，打开您的项目文件夹。我将在本系列中使用Visual Studio Code。
创建一个文件夹，您将在其中存储项目文件
将文件夹结构设置为如下所示：
1. dist
2. public
3. src
主要档案
1. 进入您的src文件夹并创建一个app.ts文件
2. 进入您的public文件夹并创建一个index.html文件
3. 您的html文件应如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title of Your Project</title>
    </head>
    <body>
    </body>
</html>

请注意，我们目前在html文件的正文中没有任何内容。稍后，我们将在app.ts文件中生成画布。

安装Babylon.js

生成package.json

npm init

您可以立即填写这些内容，也可以稍后继续按Enter并将其填写到package.json中。

打开终端（在VSCode中，您可以通过转到顶部栏>终端>新终端来执行此操作）。
安装Babylon.js

npm install --save-dev @babylonjs/core
npm install --save-dev @babylonjs/inspector

这将安装您需要的所有巴比伦依赖项。

4.Typescript支持

tsc --init

这将创建一个默认的tsconfig.json。您可以将内容替换为：

{
  “ compilerOptions” ：{ 
    “ target” ：“ es6” ， 
    “ module” ：“ commonjs” ， 
    “ noResolve” ：false ， 
    “ noImplicitAny” ：false ， 
    “ sourceMap” ：true ， 
    “ preserveConstEnums” ：true ，
    “ lib” ：[ 
        “ dom” ，
        “ es6”
    ] ，
    “ rootDir” ：“ src” 
  }
}

设置Webpack

安装依赖项

现在我们已经生成了package.json，我们需要安装开发依赖项才能使用webpack。

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

（如果这条线第一次不起作用，请再试一次）配置Webpack 现在，我们需要配置webpack才能知道该怎么做。在您的根目录中创建一个webpack.config.js文件。这是我的配置看起来像的一个示例：

const path = require("path");
const fs = require("fs");
const appDirectory = fs.realpathSync(process.cwd());
module.exports = {
    entry: path.resolve(appDirectory, "src/app.ts"), //.ts主文件的路径
    output: {
        filename: "js/bundleName.js", 在内存中创建/编译的js文件的名称 
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    mode: "development",
};

插件

此外，我们将安装一些插件，这些插件将有助于在本地运行时进行更新以及清理包。

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

安装完这些文件后，我们需要将它们添加到webpack.config.js中。我们更新后的webpack.config.js现在应该看起来像这样：

const path = require("path");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const appDirectory = fs.realpathSync(process.cwd());
module.exports = {
    entry: path.resolve(appDirectory, "src/app.ts"), //.ts主文件的路径
    output: {
        filename: "js/bundleName.js", //在内存中创建/编译的js文件的名称 
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devServer: {
        host: "0.0.0.0",
        port: 8080, //我们用于本地主机的端口（localhost：8080）
        disableHostCheck: true,
        contentBase: path.resolve(appDirectory, "public"), //告诉webpack从公共文件夹提供服务
        publicPath: "/",
        hot: true,
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: path.resolve(appDirectory, "public/index.html"),
        }),
        new CleanWebpackPlugin(),
    ],
    mode: "development",
};

现在，当我们构建并运行项目时，如果进行任何更新，浏览器将刷新，以便我们可以看到所做的更改。此外，HTML Webpack插件正在获取已编译的javascript捆绑文件，并将其注入到我们的index.html文件中。该.js捆绑包将显示在dist文件夹中。

创建一个场景

我们将把app.ts文件设置为我们项目的主要入口点。

设置并创建App类

App类将用作我们的整个游戏应用程序。这是一个有关如何设置场景的非常简单的示例，应将其分为不同的功能，并在进行过程中为项目使用类变量。

class App {
    constructor() {
        // 创建canvas html元素并将其附加到网页
        var canvas = document.createElement("canvas");
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        canvas.id = "gameCanvas";
        document.body.appendChild(canvas);
        // 初始化巴比伦场景和引擎
        var engine = new Engine(canvas, true);
        var scene = new Scene(engine);
        var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
        var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
        // 隐藏/显示检查器
        window.addEventListener("keydown", (ev) => {
            // Shift+Ctrl+Alt+I
            if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
                if (scene.debugLayer.isVisible()) {
                    scene.debugLayer.hide();
                } else {
                    scene.debugLayer.show();
                }
            }
        });
        // 运行主渲染循环
        engine.runRenderLoop(() => {
            scene.render();
        });
    }
}
new App();

此时，您应该会看到很多错误。这是因为我们尚未导入babylonjs依赖项。添加到文件顶部：

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder } from "@babylonjs/core";

捆绑项目并在本地运行

现在我们已经建立了项目，我们如何在本地运行它？我们需要在package.json中设置任务。在package.json中，将“脚本”替换为：

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

现在我们需要做的是：

npm run build
npm run start

然后，当您在浏览器中访问localhost：8080时，应该看到一个球形！

babylonjs游戏教程-设定

设定

介绍