Tutorial Three.js + Cannon-es in TypeScript

Resources
1

Hi.
I just published a tutorial on the integration and use of Cannon-es in a Three.js app. (v. 143). What’s nice (in my opinion) is the assignment of a physics’ behavior to elements coming from a GLTF model (warehouse).
https://barbierdarnal.com/Programming/Three.js_Physics.html
Comments welcome. Regards

3 Likes
2

Love the @hofk -esque simple website design - no fancy shapes, good contrast, big fonts - it just makes reading it so much easier :pray: Keep 'em coming!

Out of curiosity, since physics in games rarely required any manual math, is there an advantage to:

this._window1_mesh!.geometry.computeBoundingBox();
console.assert(this._window1_mesh!.geometry.boundingBox!.isBox3);
// Compute physical body from surrounding box:
const x_min = this._window1_mesh!.geometry.boundingBox!.min.x;
const x_max = this._window1_mesh!.geometry.boundingBox!.max.x;
const y_min = this._window1_mesh!.geometry.boundingBox!.min.y;
const y_max = this._window1_mesh!.geometry.boundingBox!.max.y;
const z_min = this._window1_mesh!.geometry.boundingBox!.min.z;
const z_max = this._window1_mesh!.geometry.boundingBox!.max.z;
this._window1_mesh!.getWorldScale(Physics._Scale);
const shape = new CANNON.Vec3((x_max - x_min) / 2 * Physics._Scale.x, (y_max - y_min) / 2 * Physics._Scale.y, (z_max - z_min) / 2 * Physics._Scale.z);

Over just:

const box3 = new Box3();
box3.expandByObject(target);

const objectSize = new Vector3();
box3.getSize(objectSize);

const shape = new Cannon.Box(new Cannon.Vec3(objectSize.x / 2.0, objectSize.y / 2.0, objectSize.z / 2.0);
2 Likes
3

Thanks about the overall comment.
You’re right. Your code is much more concise et probably more efficient! However, the spirit of a tutorial is pedagogy for beginners especially, and not for professional “game” developers who surely don’t need reading this tutorial?
Cheers.