搭建和提供web项目

目录

1. 搭建基础工程
2. 验证基础工程脚手架
3. 使用多场景项目

现在我们要建立项目的另一半，即在web应用程序上下文中运行的部分。

搭建基础工程

在项目的根目录下创建一个名为webproject的文件夹这是所有这些工作将要进行的地方。

当前，此文件夹为空。我们需要在这里搭建一个初步的项目。打开Rainy-Day文件夹中的第一个项目。这次我们将在项目菜单中选择一个不同于以前的菜单选项。

1. 单击导出项目模板。。。
2. 选择.babylon格式，然后点击Ok
3. 导航到您刚刚创建的web项目目录，保存。

您的文件夹结构现在将如下所示：

你看到web项目文件夹里有很多新材料吗？此外，还有一个名为scene的文件夹，它将雨天场景中的所有文件都转储到这里。有些事情需要指出

• 这个scene.babylon 和 Rainy-Day 的一样。
• 这并非是scene.editorproject完全归档！文件结构的这一部不一样。
• 有一个新的project.editorproject文件，而在editor-projects文件夹中不存在。

这个新的project.editorproject文件，包含一些将在web应用程序中使用的元素，但这些在编辑器中并未使用。它是一个不同的文件，用于不同的用途，尽管扩展名是同一个扩展名。

验证基础工程脚手架

就目前的情况来看，这个脚手架并没有完全按照支持多个项目所需的结构方式完成和组织。尽管如此，我们仍然可以运行一个快速测试，以确保我们的工作到目前为止是正确的！

在这个web项目的根目录下，我们将在这里打开一个终端。在本教程中，我假设了一些事情

• 您已经对javascript web项目有些熟悉。你明白package.json和node_modules是什么。如果你没有，花点时间好好读一读。web上有很多关于这方面的好资源，这不在本教程的范围之内。
• 您的环境已经配置为运行node.js和yarn或npm。在本教程中，我使用的是yarn，但npm也同样有效！

在web项目目录中，在适当的终端中运行以下命令：

yarn install && yarn build && yarn run webserver

注意如果使用的是npm，写法是这样的

npm install && npm run-script build && npm run webserver

这个命令，将要做下面这些事：

1. yarn install 自动从网络下载，安装web项目依赖。创建存储在node_modules文件夹。
2. yarn build 在build文件夹中创建typescript文件的发布版本。不复制，是编译生成javascript。
3. yarn run webserver 在端口1338上启动一个静态webserver。

现在打开http:// localhost:1338就可以看到你创建的场景了。

使用多场景项目

我们即将为一个包含多个场景的web项目建立最终工作流。现在我们需要提供我们的项目来支持多个场景。

1. 只需删除web项目/场景。我们要换掉这个。
2. 在其位置添加一个名为scenes的新空文件夹。
3. 在场景内部，创建两个空文件夹，跟editor-projects目录一样，而不仅仅是复制文件夹，我们需要创建两个实际的空文件夹。

• 创建文件夹 web-project/scenes/Rainy-Day
• 创建文件夹 web-project/scenes/Space-Scene

现在我们的项目基本上布局正确，但是我们需要在这些项目中实际放置所需的场景资源和文件。我们打算一次打开一个出口。现在，如果你的编辑器是打开的，只要关闭它，你就可以在与本教程相同的状态下开始。

1.导航到editor-project/Rainy-Day，然后双击scene.editor项目像以前一样在巴比伦的编辑器中打开这个。

2.目测确认你在正确的场景中：

3.点击菜单 Scene > Export Final Scene And Assets ...

4.选择.babylon格式，然后点击ok。

5.小心的导航到web-project/scenes文件夹，选择 Rainy-Day,点击Select Folder。

6.现在你的目录结构如下：

对Space-Scene场景再次执行同样的过程。注意导航到正确的目录。

注意到“Scene”文件夹与editor-projects中的文件夹有点不同吗？

目录有点不同。您的项目需要类似于：

• 在editor-projects项目中：场景有一个scene.editorproject在根目录下，scene文件夹中存着所有资源。
• 在web项目场景中：结构是平面的，子场景中，多出来一个project.editorproject文件。

现在我们来修改game.ts文件，在没修改这之前，它是这样的：

import {
  Engine,
  Scene,
  SceneLoader,
  Tools,
  Vector3,
  CannonJSPlugin
} from "babylonjs";

import { Extensions } from "babylonjs-editor";

export default class Game {
  // Public members
  public engine: Engine;
  public canvas: HTMLCanvasElement = <HTMLCanvasElement>(
    document.getElementById("renderCanvas")
  );

  public scene: Scene = null;

  /**
   * Constructor
   */
  constructor() {
    // Create engine
    this.engine = new Engine(this.canvas, true, {
      // Options
    });

    // Events
    window.addEventListener("resize", () => this.engine.resize());
  }

  /**
   * Runs the game
   */
  public run(): void {
    // Load Scene
    SceneLoader.Load(
      "./scene/",
      "scene.babylon",
      this.engine,
      (scene: Scene) => {
        this.scene = scene;

        // No camera?
        if (!this.scene.activeCamera) {
          this.scene.createDefaultCamera(false, true, true);
        }

        // Attach camera
        this.scene.activeCamera.attachControl(this.canvas, true);

        // Load extensions
        Tools.LoadFile("./scene/project.editorproject", (data: string) => {
          // Apply extensions (such as custom code, custom materials etc.)
          Extensions.RoolUrl = "./scene/";
          Extensions.ApplyExtensions(this.scene, JSON.parse(data));

          // Run render loop
          this.engine.runRenderLoop(() => {
            this.scene.render();
          });
        });
      }
    );
  }
}

要弄懂这个文件，要费点劲。

  constructor() {
    // Create engine
    this.engine = new Engine(this.canvas, true, {
      // Options
    });

    // Events
    window.addEventListener("resize", () => this.engine.resize());
  }

这个结构，代码很简洁， 它会创建引擎并使引擎在运行时，调整窗口大小。

SceneLoader.Load(
  "./scene/",
  "scene.babylon",
  this.engine,
  (scene: Scene) => {
    this.scene = scene;
  }

  //..other stuff
);

在这个闭包中，我们基本上是在游戏开始时用构造器运行场景。现在，你可以看到这显然指向了错误的地方，它指向了在我们改变东西之前文件夹的样子。当这起作用时，它将负责

• 网格
• 摄像机
• 灯
• 缩放、定位
• 资源的位置，如纹理等。

// No camera?
if (!this.scene.activeCamera) {
  this.scene.createDefaultCamera(false, true, true);
}

// Attach camera
this.scene.activeCamera.attachControl(this.canvas, true);

这只是一些代码，以确保相机在那里和工作。如果出于某种原因，你保存了一个没有活动摄影机的场景，它会为你制作一个。

Tools.LoadFile("./scene/project.editorproject", (data: string) => {
  // Apply extensions (such as custom code, custom materials etc.)
  Extensions.RoolUrl = "./scene/";
  Extensions.ApplyExtensions(this.scene, JSON.parse(data));

  // Run render loop
  this.engine.runRenderLoop(() => {
    this.scene.render();
  });
});

加载场景后，这是样板中的第二个异步事件。然后我们需要加载project.editorproject文件，然后它基本上用这个文件中的一些附加信息来装饰场景。这个文件负责

• 粒子
• 预制件
• 后处理
• 场景元数据

最后，在这两个连续的文件加载之后，我们可以开始渲染。

所以基本的过程是

1. 初始化3D引擎
2. 然后加载场景
3. 处理场景的“错误”或默认内容
4. 加载.editorproject元数据
5. 用元数据装饰场景
6. 实际开始渲染

更换您的game.ts代码如下：

import {
  CannonJSPlugin,
  Engine,
  Scene,
  SceneLoader,
  Tools,
  Vector3
} from "babylonjs";

import { Extensions } from "babylonjs-editor";

export default class Game {
  public engine: Engine;
  public canvas: HTMLCanvasElement = <HTMLCanvasElement>(
    document.getElementById("renderCanvas")
  );

  public scene: Scene = null;
  constructor() {
    this.engine = new Engine(this.canvas, true, {});
    window.addEventListener("resize", () => this.engine.resize());
  }

  public run(): void {
    const rainyDay = `./scenes/Rainy-Day/`;
    const spaceScene = `./scenes/Space-Scene/`;
    let currentScene = rainyDay;

    SceneLoader.Load(
      `${currentScene}`,
      "scene.babylon",
      this.engine,
      (scene: Scene) => {
        this.scene = scene;

        if (!this.scene.activeCamera) {
          this.scene.createDefaultCamera(false, true, true);
        }

        this.scene.activeCamera.attachControl(this.canvas, true);

        Tools.LoadFile(
          `${currentScene}/project.editorproject`,
          (data: string) => {
            Extensions.RoolUrl = currentScene;
            Extensions.ApplyExtensions(this.scene, JSON.parse(data));
            this.engine.runRenderLoop(() => {
              this.scene.render();
            });
          }
        );
      }
    );
  }
}

这和以前很相似，只是有一点变化。我们为两个场景添加了正确的路径。如果您的web服务器正在运行，请结束它并运行yarn build&&yarn run webserver以重建并检查新路径。

const rainyDay = `./scenes/Rainy-Day/`; 
const spaceScene = `./scenes/Space-Scene/`;
let currentScene = spaceScene;

检查Space Scene。使用F12打开检查器。如果你在之前看到同样的场景，请检查一些东西

• 确保构建脚本确实在用rimraf清理正确的文件夹
• 确保在inspector中禁用缓存

好今天就讲到这里，明天讲工作流的最后一篇。