Содержание блога
Скачать исходники: hello-ammojs-webgl10-ts.zip (46.0 Кб)
Исходники на GitHub: hello-ammojs-webgl10-ts
Установите глобально следующие пакеты:
- npm i typescript -g
- npm i browserify -g
- npm i uglify-js -g
Установите пакеты из `package.json` командой: npm install
Раскомментируйте/Закомментируйте Debug/Release в файлах `index.html` и `main.ts` (см. комментарии в этих файлах).
Используйте следующие комманды для сборки:
- `npm run debug` - для отладки в редакторах кода и для публикации в песочницах, например, в Plunker: Hello Ammo.js. WebGL 1.0, TypeScript
- `npm run release` - для сборки в `bundle.min.js` для production
package.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| {
"name": "hello-ammojs-webgl10-ts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "tsc -p tsconfigs/tsconfig.debug.json",
"compile": "tsc -p tsconfigs/tsconfig.release.json",
"bundle": "browserify public/js/main.js -o public/js/bundle.js",
"minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
"release": "npm run compile && npm run bundle && npm run minify"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"ammo.js": "github:kripken/ammo.js",
"requirejs": "^2.3.6"
},
"devDependencies": {
"@types/requirejs": "^2.1.32",
"ammojs-typed": "^1.0.6"
}
} |
|
public/index.html
| PHP/HTML | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Ammo. WebGL 1.0, TypeScript</title>
<!-- Debug -->
<script data-main="js/RequireConfig"
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<!-- Release -->
<!-- <script src="js/bundle.min.js"></script> -->
</head>
<body>
<canvas id="renderCanvas" width="300" height="150"></canvas>
<div id="output"></div>
<a href="https://github.com/8Observer8/hello-ammojs-webgl10-ts">Source Code on GitHub</a>
<br>
<a href="https://plnkr.co/edit/6KQT9VQHWvswY3cc?preview">Playground</a>
</body>
</html> |
|
src/client/main.ts
| JavaScript | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| import { mat4 } from "gl-matrix";
import AmmoModule from "ammojs-typed";
let Ammo: typeof AmmoModule;
let gl: WebGLRenderingContext;
let output: HTMLDivElement;
function init()
{
const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
gl = canvas.getContext("webgl");
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
output = document.getElementById("output") as HTMLDivElement;
const vec = new Ammo.btVector3(1, 2, 3);
output.innerHTML = `vec = (${vec.x()}, ${vec.y()}, ${vec.z()})<br>`;
const matrix = mat4.create();
output.innerHTML += `matrix = [${matrix}]`;
}
function main()
{
AmmoModule().then((api) =>
{
Ammo = api;
init();
});
}
// Debug
main();
// Release
// window.onload = () => main(); |
|
src/client/RequireConfig.ts
| JavaScript | 1
2
3
4
5
6
7
8
9
| requirejs.config({
baseUrl: "js",
paths: {
"gl-matrix": "https://cdn.jsdelivr.net/npm/gl-matrix@3.3.0/gl-matrix-min",
"ammojs-typed": "https://dl.dropboxusercontent.com/s/e5iytx67noqoew7/ammo"
}
});
requirejs(["main"], () => { }); |
|
tsconfigs/tsconfig.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
| {
"compilerOptions": {
"target": "ES5",
"outDir": "../public/js",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": [
"../src/client/**/*.ts"
]
} |
|
tsconfigs/tsconfig.debug.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
| {
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "AMD",
"sourceMap": true,
"types": [
"requirejs",
"gl-matrix",
"ammojs-typed"
],
"moduleResolution": "node"
}
} |
|
tsconfigs/tsconfig.release.json
| JSON | 1
2
3
4
5
6
7
8
9
10
11
12
13
| {
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "CommonJS",
"sourceMap": false,
"types": [
"node"
]
},
"exclude": [
"../src/client/RequireConfig.ts"
]
} |
|
|
