將Unity WebGL項目導入到Angular2組件中

我正在尋找將Unity WebGL項目集成到Angular2應用程序中。將所有腳本移動到Angular2組件的正確方法是什麼？將Unity WebGL項目導入到Angular2組件中

首先，統一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-文件，而不是「要求」），在ngAfterViewInit行總是給人一個錯誤：「引用錯誤：UnityLoader沒有定義」。

這應該怎麼做，所以它會工作？

來源

2017-05-11 Juhana Pietari Lehtiniemi

'./webgl-app/Build/UnityLoader.js'被導入，但不應該被聲明爲變量？如'./webgl-app/Build/UnityLoader.js'的'import {UnityLoader};' – jervtub

感謝您的建議！我測試了這個，但是我得到了UnityLoader/UnityProgress不是模塊的錯誤。 –

_TemplateData/UnityProgress.js_是否有任何'export'聲明函數？只有導出函數/變量可以導入afaik。 – jervtub

，所以我是瞎搞與此相當的時間...

我把它和使用的角度運行/ CLI @最新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包。在構建所有內容時都將複製到資產文件夾中。

來源

2018-01-21 16:08:12 jonny

將Unity WebGL項目導入到Angular2組件中

回答

相關問題