创建一个 d.ts 文件到 UnityLoader.js (Unity3D)
Create a d.ts file to UnityLoader.js (Unity3D)
我必须使用 TypeScript 在 Angular 中导入 UnityLoader.js。但是,该库没有 ts 声明并且需要配置变量(数组)才能工作(见下文)。
默认实现:
<!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 | Test Unity</title>
<style>
/* a style sheet needs to be present for cursor hiding and custom cursors to work. */
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<script type='text/javascript'>
/* Configuration variable here !! */
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
dataUrl: "Development/ExportMiniDev.data",
codeUrl: "Development/ExportMiniDev.js",
memUrl: "Development/ExportMiniDev.mem",
};
</script>
/* Library call here !! */
<script src="Development/UnityLoader.js"></script>
</body>
</html>
我已阅读所有 docs and I followed this 创建声明文件。
这是我的声明文件 (index.d.ts):
// Type definitions for UnityLoader 5.4.3.f1
// Project: UnityLoader
// Definitions by: Alexandre Hagen <https://github.com/AlexandreHagen>
declare namespace UnityLoader {
interface Module {
TOTAL_MEMORY: number,
errorhandler?: boolean,
compatibilitycheck?: boolean,
dataUrl: string,
codeUrl: string,
memUrl: string
}
}
export {};
我在 node_modules 中的文件夹结构:
.
├── ...
├── unity-loader
│ ├── index.d.ts # Ts declaration file
│ ├── index.js # It is a remame of UnityLoader.js
│ └── package.js # Package to npm
└── ...
但是我还有一件事不明白。如何链接到我的声明一个不在 npm 包中而只是一个 .js 的库?事实上,文档似乎只涉及 npm 包。
目前 import unityLoader = require("unity-loader");
正在工作,但没有导入 UnityLoader.js... 所以我不能使用它。
那么我们可以做些什么来在 Typescript 中使用一个简单的全局库呢?
这个问题对我来说很重要See here希望你能帮上忙!
Ps:我正在使用 Webpack 构建我的应用程序。
不确定您是否解决了问题。我准备好了 运行。但它并不像它应该的那样好。当我转到另一页然后返回时,我会收到错误消息……但这是我所做的……
我的组件:
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { UnityService } from './unity.service';
declare var jQuery: any;
declare function feet(): any;
declare function water(): any;
@Component({
moduleId: module.id,
selector: 'sd-about',
templateUrl: 'about.component.html',
styleUrls: [ 'about.component.css' ]
})
export class AboutComponent implements OnInit {
public selectedValue: string;
public data: any;
constructor( private http: Http, private _unity: UnityService) {
}
ngOnInit(): void {
jQuery.getScript('app/about/test.js');
jQuery.getScript('assets/Unity/UnityLoader.js');
}
public toggle_feet() {
feet();
}
public toggle_water() {
water();
}
private onError( onError: any ) {
console.log(onError);
}
}
test.js:
var Module = {
TOTAL_MEMORY: 568435456,
errorhandler: null,
compatibilitycheck: null,
dataUrl: "assets/WebGL/WebGL.data",
codeUrl: "assets/WebGL/WebGL.js",
asmUrl: "assets/WebGL/WebGL.asm.js",
memUrl: "assets/WebGL/WebGL.mem"
};
function unity() {
console.log("Hello from Unity")
}
function water(){
SendMessage("Build","Toggle_Water");
}
function feet(data){
SendMessage("Build","Toggle_Feet", data);
}
希望这对您有所帮助!
我目前正在尝试将所有内容移动到服务中并摆脱 jquery.....
我必须使用 TypeScript 在 Angular 中导入 UnityLoader.js。但是,该库没有 ts 声明并且需要配置变量(数组)才能工作(见下文)。
默认实现:
<!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 | Test Unity</title>
<style>
/* a style sheet needs to be present for cursor hiding and custom cursors to work. */
</style>
</head>
<body>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
<script type='text/javascript'>
/* Configuration variable here !! */
var Module = {
TOTAL_MEMORY: 268435456,
errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
compatibilitycheck: null,
dataUrl: "Development/ExportMiniDev.data",
codeUrl: "Development/ExportMiniDev.js",
memUrl: "Development/ExportMiniDev.mem",
};
</script>
/* Library call here !! */
<script src="Development/UnityLoader.js"></script>
</body>
</html>
我已阅读所有 docs and I followed this 创建声明文件。
这是我的声明文件 (index.d.ts):
// Type definitions for UnityLoader 5.4.3.f1
// Project: UnityLoader
// Definitions by: Alexandre Hagen <https://github.com/AlexandreHagen>
declare namespace UnityLoader {
interface Module {
TOTAL_MEMORY: number,
errorhandler?: boolean,
compatibilitycheck?: boolean,
dataUrl: string,
codeUrl: string,
memUrl: string
}
}
export {};
我在 node_modules 中的文件夹结构:
.
├── ...
├── unity-loader
│ ├── index.d.ts # Ts declaration file
│ ├── index.js # It is a remame of UnityLoader.js
│ └── package.js # Package to npm
└── ...
但是我还有一件事不明白。如何链接到我的声明一个不在 npm 包中而只是一个 .js 的库?事实上,文档似乎只涉及 npm 包。
目前 import unityLoader = require("unity-loader");
正在工作,但没有导入 UnityLoader.js... 所以我不能使用它。
那么我们可以做些什么来在 Typescript 中使用一个简单的全局库呢? 这个问题对我来说很重要See here希望你能帮上忙!
Ps:我正在使用 Webpack 构建我的应用程序。
不确定您是否解决了问题。我准备好了 运行。但它并不像它应该的那样好。当我转到另一页然后返回时,我会收到错误消息……但这是我所做的…… 我的组件:
import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { UnityService } from './unity.service';
declare var jQuery: any;
declare function feet(): any;
declare function water(): any;
@Component({
moduleId: module.id,
selector: 'sd-about',
templateUrl: 'about.component.html',
styleUrls: [ 'about.component.css' ]
})
export class AboutComponent implements OnInit {
public selectedValue: string;
public data: any;
constructor( private http: Http, private _unity: UnityService) {
}
ngOnInit(): void {
jQuery.getScript('app/about/test.js');
jQuery.getScript('assets/Unity/UnityLoader.js');
}
public toggle_feet() {
feet();
}
public toggle_water() {
water();
}
private onError( onError: any ) {
console.log(onError);
}
}
test.js:
var Module = {
TOTAL_MEMORY: 568435456,
errorhandler: null,
compatibilitycheck: null,
dataUrl: "assets/WebGL/WebGL.data",
codeUrl: "assets/WebGL/WebGL.js",
asmUrl: "assets/WebGL/WebGL.asm.js",
memUrl: "assets/WebGL/WebGL.mem"
};
function unity() {
console.log("Hello from Unity")
}
function water(){
SendMessage("Build","Toggle_Water");
}
function feet(data){
SendMessage("Build","Toggle_Feet", data);
}
希望这对您有所帮助! 我目前正在尝试将所有内容移动到服务中并摆脱 jquery.....