将Unity WebGL项目导入Angular2组件 | WebGL项目导入Angular2组件

本文介绍了将Unity WebGL项目导入Angular2组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm looking to integrate a Unity WebGL-project into an Angular2 app. What's the proper way to move all this script into an Angular2 component?

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

First, the Unity WebGL exports an index.html like this:

<!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文件中:

I started to split this and first I moved the stylesheet into the template .css file:

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

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

Then I moved the javascript into the component .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模板，我将其保留:

And then for the .html template I left this:

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

但是，无论我尝试哪种方法(例如在JS文件上使用'require')，ngAfterViewInit中的行始终会出现错误:参考错误:未定义UnityLoader".

However, whatever approach I try (like using 'require' on the JS-files instead), the line in the ngAfterViewInit always gives an error: "Reference error: UnityLoader is not defined".

应如何正确完成操作才能使其正常工作?

How should this be done properly so it would work?

推荐答案

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

To add Unity WebGL to your project:

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

1) Export WebGL project to a /unity folder in your Angular project root (same level as src). Copy the following files from your Build folder to /src/assets/unity:

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

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

2) Add UnityProgress.js and UnityLoader.js to your angular.json scripts:

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

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

3) (optional) Add style.css to your angular.json styles

"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 :

4) Add the base Unity HTML to your 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实例化:

5) Lastly, instantiate your unityContainer in your component.ts:

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");
  }

}

这篇关于将Unity WebGL项目导入Angular2组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！