Search the Community
Showing results for tags 'ammojs'.
Found 2 results
-
There is a problem in different browsers, for example, if a roulette ball in Chrome stops at a certain number in another browser, it stops at another. Can the difference between physics world.step (cannon.js) in different browsers? -
My example shows how to use Ammo.js with TypeScript in Debug and Release modes: hello-ammojs-webgl10-ts You should install these modules globally: npm i typescript -g npm i browserify -g npm i uglify-js -g Install all packages from `package.json` using the command: `npm i` Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files). Use these commands to build the example: `npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Ammo.js. WebGL 1.0, TypeScript `npm run release` - to bundle in `bundle.min.js` for production Note. See alse: Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine) package.json { "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 <!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 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 requirejs.config({ baseUrl: "js", paths: { "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min", "ammojs-typed": "https://dl.dropboxusercontent.com/s/e5iytx67noqoew7/ammo" } }); requirejs(["main"], () => { }); tsconfigs/tsconfig.json { "compilerOptions": { "target": "ES5", "outDir": "../public/js", "allowSyntheticDefaultImports": true, "esModuleInterop": true }, "include": [ "../src/client/**/*.ts" ] } tsconfigs/tsconfig.debug.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "AMD", "sourceMap": true, "types": [ "requirejs", "gl-matrix", "ammojs-typed" ], "moduleResolution": "node" } } tsconfigs/tsconfig.release.json { "extends": "./tsconfig.json", "compilerOptions": { "module": "CommonJS", "sourceMap": false, "types": [ "node" ] }, "exclude": [ "../src/client/RequireConfig.ts" ] }