Create cannon shape from glb / THREE.Mesh / BufferGeometry.

Tanishq Singh
Nov 10, 2021

step 1: npm i cannon-utils

step 2: import cu from ‘cannon-utils’;

step 3: create shape, pass mesh and size

shape: cu.CreateTriMesh(mesh, { x: 5, y: 5, z: 5 });

full example

gltfLoader.load(‘file_location.glb’, gltf => {
gltf.scene.scale.set(2, 2, 2);

const cannon_shape = cu.CreateTriMesh(gltf.scene.children[1], { x: 5, y: 5, z: 5 });

const body = new CANNON.Body({
shape: cannon_shape,
mass: 1
});

world.addBody(body);

scene.add(gltf.scene);
});

--

--