I try to use the box2d-wasm package. I successfully run a program that prints a vector: https://plnkr.co/edit/6dTVT4HtFW4wf15H
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Since import maps are not yet supported by all browsers, it is
necessary to add the polyfill es-module-shims.js
Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
-->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
"box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d";
let box2d;
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
async function main() {
await initBox2D();
const vec = new box2d.b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
}
main();
</script>
</body>
</html>
I noticed that there is a b2Draw class:
console.log(box2d);
But how to use this constructor? I try to instantiate this class:
const debugDrawer = new box2d.b2Draw();
I have this error: cannot construct a b2Draw, no constructor in IDL
.
I try to extend box2d.b2Draw like this:
async function main() {
await initBox2D();
const vec = new box2d.b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
class DebugDrawer extends box2d.b2Draw {
}
const debugDrawer = new DebugDrawer();
}
But I have the same error.
I found the solution in the official example: https://github.com/Birch-san/box2d-wasm/tree/master/demo/modern/public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- Since import maps are not yet supported by all browsers, it is
necessary to add the polyfill es-module-shims.js
Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation
-->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3",
"box2d": "https://8observer8.github.io/lib/box2d-wasm-2.4.1/box2d-wasm-2.4.1.min.js"
}
}
</script>
<script type="module">
import Box2DLib from "box2d";
let box2d;
function initBox2D() {
return new Promise(resolve => {
Box2DLib().then((re) => {
box2d = re;
resolve();
});
});
}
async function main() {
await initBox2D();
const {
b2Draw: { e_shapeBit },
b2Vec2,
JSDraw
} = box2d;
const vec = new b2Vec2(1, 2);
console.log(`vec = ${vec.x}, ${vec.y}`);
function makeDebugDrawer() {
const debugDrawer = Object.assign(new JSDraw(), {
DrawSegment(vert1_p, vert2_p, color_p) {},
DrawPolygon(vertices_p, vertexCount, color_p) {},
DrawSolidPolygon(vertices_p, vertexCount, color_p) {},
DrawCircle(center_p, radius, color_p) {},
DrawSolidCircle(center_p, radius, axis_p, color_p) {},
DrawTransform(transform_p) {},
DrawPoint(vertex_p, sizeMetres, color_p) {}
});
debugDrawer.SetFlags(e_shapeBit);
return debugDrawer;
}
const debudDrawer = makeDebugDrawer();
}
main();
</script>
</body>
</html>