我希望将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文件中：
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”.
应如何正确完成这样才能起作用？
解决方法:
所以我一直在搞乱这个……
我使用angular / cli @ latest 1.6.5进行运行
这是我的app.component.ts
import { Component, NgZone, OnInit } from '@angular/core';import * as $from 'jquery';declare const UnityLoader;@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent implements OnInit{public gameObject: any;constructor(private ngZone: NgZone) { window.unity = window.unity || {}; window.unity.GetUnityNumber = this.randomNumberFromUnity.bind(this);}public ngOnInit(): void { this.init();}public helloUnity() { console.log(this.gameObject); // <-- always undefined ? this.gameObject.SendMessage('SetText', 'HELLO?'); }private init() { $.getScript('assets/UnityLoader.js').done(function ( bla , text) { this.gameObject = UnityLoader.instantiate('gameContainer','assets/test.json'); //gameObject not undefined at this stage.. });}private randomNumberFromUnity(input: string) { this.ngZone.run(() => { console.log('call from unity', input); });}}
在typings.d.ts中,我扩展了窗口元素.
interface Window { unity: any;}所以,当我从团结中打电话时,我称之为
Application.ExternalCall("unity.GetUnityNumber", rnd);我现在所缺少的就是团结一致…也许你对这个有一个想法？
我将unity-build作为私有的npm包.构建时将所有内容复制到assets文件夹中.
来源：https://www.icode9.com/content-1-273951.html联系客服
