rapier.js icon indicating copy to clipboard operation
rapier.js copied to clipboard

TriMesh should have better documentation. Example included.

Open jonmdev opened this issue 1 year ago • 2 comments

Based on the minimal documentation we have, if I want to create a TriMesh floor made of a single triangle, this should I think look like this:

	let triMeshVerts = new Float32Array(9);

	triMeshVerts[0] = -9; 	triMeshVerts[1] = 0;	triMeshVerts[2] = 9;	//point 1 x,y,z
	triMeshVerts[3] = 9;	triMeshVerts[4] = 0;	triMeshVerts[5] = 9;	//point 2 x,y,z
	triMeshVerts[6] = 0;	triMeshVerts[7] = 0;	triMeshVerts[8] = -9;	//point 3 x,y,z

	let triMeshIndices = new Uint32Array(9);
	
	for (let i=0;i<triMeshIndices.length;i++){
		triMeshIndices[i] = 0; //all points used for single triangle
	}
	let groundColliderDesc = RAPIER.ColliderDesc.trimesh(triMeshVerts,triMeshIndices).setTranslation(0,0,0);
	

However, objects fall right through this. Is there some other step that needs to be done or is this function broken?

By contrast, if I make a triangle with the same points it works properly and stops objects from going through it:

let groundColliderDesc = RAPIER.ColliderDesc.triangle(new RAPIER.Vector3(-9,0,9), new RAPIER.Vector3(9,0,9), new RAPIER.Vector3(0,0,-9)).setTranslation(0,0,0);
    world.createCollider(groundColliderDesc);

Thanks for any help.

jonmdev avatar Apr 12 '24 00:04 jonmdev

Managed to get the correct code. It is:

let triMeshVerts = new Float32Array(9);
    triMeshVerts[0] = -9;    triMeshVerts[1] = 0;    triMeshVerts[2] = 9;
    triMeshVerts[3] = 9;    triMeshVerts[4] = 0;    triMeshVerts[5] = 9;
    triMeshVerts[6] = 0;    triMeshVerts[7] = 0;    triMeshVerts[8] = -9;

    let triMeshIndices = new Uint32Array(3);
    triMeshIndices[0] = 0;
    triMeshIndices[1] = 1;
    triMeshIndices[2] = 2;
    
    let groundColliderDesc = RAPIER.ColliderDesc.trimesh(triMeshVerts,triMeshIndices).setTranslation(0,0,0);

This is not intuitive how the indices work. I suggest adding an example like this to the documentation for illustration.

An example could also be given for a quad with reused verts like:

let triMeshVerts = new Float32Array(9);
    triMeshVerts[0] = -2;    triMeshVerts[1] = 0;    triMeshVerts[2] = -2; //vert1
    triMeshVerts[3] = -2;    triMeshVerts[4] = 0;    triMeshVerts[5] = 2; //vert2
    triMeshVerts[6] = 2;    triMeshVerts[7] = 0;    triMeshVerts[8] = 2; //vert3
    triMeshVerts[9] = 2;    triMeshVerts[10] = 0;    triMeshVerts[11] = -2; //vert4

    let triMeshIndices = new Uint32Array(3);
    triMeshIndices[0] = 0;    triMeshIndices[1] = 1;    triMeshIndices[2] = 2; //triangle 1
    triMeshIndices[3] = 0;    triMeshIndices[4] = 3;    triMeshIndices[5] = 2; //triangle 2
    
    let groundColliderDesc = RAPIER.ColliderDesc.trimesh(triMeshVerts,triMeshIndices).setTranslation(0,0,0);

If that is in fact correct.

jonmdev avatar Apr 12 '24 04:04 jonmdev

Rapier.js uses the same vertex/index array design that Three.js uses. I presume this is so you can easily apply the same arrays you use in Rapier.js to create a Three.js BufferGeometry. This same documentation for BufferGeometry in Three.js can be used for a Rapier.js TriMesh: https://threejs.org/docs/#api/en/core/BufferGeometry

PoseidonEnergy avatar Oct 28 '25 17:10 PoseidonEnergy