javascript - 将 Unity WebGL 项目导入 Angular2 组件

我希望将 Unity WebGL 项目集成到 Angular2 应用程序中。将所有这些脚本移动到 Angular2 组件中的正确方法是什么？

首先，Unity WebGL 像这样导出一个 index.html:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | Espoo web manager (Prefab preview)</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script src="TemplateData/UnityProgress.js"></script>  
    <script src="Build/UnityLoader.js"></script>
    <script>
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/builds.json", {onProgress: UnityProgress});
    </script>
  </head>
  <body>
    <div class="webgl-content">
      <div id="gameContainer" style="width: 960px; height: 600px"></div>
      <div class="footer">
        <div class="webgl-logo"></div>
        <div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
        <div class="title">Espoo web manager (Prefab preview)</div>
      </div>
    </div>
  </body>
</html>

我开始拆分它，首先我将样式表移动到模板 .css 文件中:

@import './webgl-app/TemplateData/style.css';

然后我将 javascript 移动到组件 .ts-file 中:

import { Component, AfterViewInit } from '@angular/core';
import './webgl-app/TemplateData/UnityProgress.js';
import './webgl-app/Build/UnityLoader.js';

declare var UnityLoader: any;
declare var UnityProgress: any;

@Component({
  selector: 'app-unity-prefab-preview',
  templateUrl: './unity-prefab-preview.component.html',
  styleUrls: ['./unity-prefab-preview.component.css']
})
export class UnityPrefabPreviewComponent implements AfterViewInit {
  constructor() {}

  gameInstance: any;

  ngAfterViewInit() {
    this.gameInstance = UnityLoader.instantiate("gameContainer", "./webgl-app/Build/builds.json", { onProgress: UnityProgress });
  }

}

然后对于 .html 模板，我留下了这个:

<div class="webgl-content">
  <div id="gameContainer" style="width: 960px; height: 600px"></div>
</div>

但是，无论我尝试什么方法(比如在 JS 文件上使用“require”)，ngAfterViewInit 中的行总是给出错误:“引用错误:未定义 UnityLoader”。

应该如何正确地完成它才能发挥作用？

最佳答案

将 Unity WebGL 添加到您的项目中:

1) 将 WebGL 项目导出到 Angular 项目根目录中的 /unity 文件夹(与 src 同一级别)。将以下文件从您的 Build 文件夹复制到 /src/assets/unity:

unity.json
unity.data.unityweb
unity.wasm.code.unityweb
unity.wasm.framework.unityweb

2) 将 UnityProgress.js 和 UnityLoader.js 添加到您的 angular.json 脚本中:

"scripts": [
  "unity/TemplateData/UnityProgress.js",
  "unity/Build/UnityLoader.js"
],

3) (可选)将style.css 添加到您的angular.json 样式

"styles": [
  "node_modules/font-awesome/css/font-awesome.css",
  "src/assets/theme.scss",
  "src/styles.scss",
  "unity/TemplateData/style.css"
],

4) 将基础 Unity HTML 添加到您的 component.html:

<div class="webgl-content">
  <div id="unityContainer" style="width: 960px; height: 600px"></div>
  <div class="footer">
    <div class="webgl-logo"></div>
    <div class="fullscreen" (click)="unityInstance.SetFullscreen(1)"></div>
    <div class="title">UnityProject</div>
  </div>
</div>

5) 最后，在您的 component.ts 中实例化您的 unityContainer:

import { Component, OnInit, AfterViewInit } from '@angular/core';
declare var UnityLoader: any;

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit, AfterViewInit {
  unityInstance: any;

  constructor() { }

  ngOnInit() { }

  ngAfterViewInit() {
    this.unityInstance = UnityLoader.instantiate("unityContainer", "assets/unity/unity.json");
  }

}

关于javascript - 将 Unity WebGL 项目导入 Angular2 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43919161/

javascript - 将 Unity WebGL 项目导入 Angular2 组件

上一篇：组件负载的 Angular 变化变量

下一篇：angular - 将 Reactive Forms 组传递到路由器导出