Three.js with Cannon.js surface with gltf

Questions
, ,
1

Hi! I am quite new in Three.js (started on last friday), and i have some questions about implementing a surface using cannon.js.

Well, first i had implemented a gtlf file using GLTFLoader(), and it works! Then i wanted it to be a solid surface to others objects to colide on it (this surface is a terrain that i want to drive over with a car), so i started to use Cannon.js.

So, i was thinking of something like this to create the terrain that i want:

function initPhysics() {

   var world = new CANNON.World();

   world.gravity.set(0, 0, -9.8);

   world.broadphase = new CANNON.NaiveBroadphase(world);

   const groundMaterial = new CANNON.Material("groundMaterial");

   // how to set the gltf file in terrainShape??

   // const terrainShape = new CANNON.Box(new CANNON.Vec3());

   const terrainBody = new CANNON.Body({ mass: 0, material: groundMaterial });

   terrainBody.addShape(terrainShape);

   world.add(terrainBody);

   animate();

}

I dont know if i link my gltf in this function or how i could do that! I saw in documentation about this “new CANNON.Box(new CANNON.Vec3())” but i think it works for some fixed geometries, right?

I know CANNON.js cant receive this gltf files, but i wish to know if i could manage to get the info that Cannon needs from it to build the surface!

So, how can i use a gltf file to create a solid surface with Cannon.js? (i uploaded the gltf file of the terrain) Thanks!!

Terrain.zip (972.7 KB)

2 Likes