here is the code. https://codepen.io/hansen1416/pen/yLRWKBB
The small white object on the left is the actuall object that I copied from a GLB model. It is created from a BufferGeometry. Here is the data https://digit-trainer.s3.ap-southeast-1.amazonaws.com/buffergeo.json
But when I try to create a ConvexGeometry object (red object on the right.) from it, it looks nothing like the original object.
I learned the conversion code from here Convex Geometry to CANNON.Trimesh - Three.js Tutorials
My ultimate goal is to create rigid body from GLB oroject. I learned that I have to first create a ConvexHull, then create a Trimesh. So if there is another approach that I can get a rigid body from GLB, I’d really appreciate your help. The rigid body doesn’t have to be exactly the same as GLB, roughly close shape is fine.
In the linked example, the ConvexGeometry was created using one of the child geometries found in the glTF hierarchy.
You may have to traverse your glTF and find which geometry to use.
You don’t need to use a Trimesh, if a simple sphere or box shape would work just as good. Spheres are the fasted shape to use when calculating physics.
Here is a sphere around just one part of the model that is deemed important enough : Kick Boxing - Three.js Tutorials
Here is a compound shape of spheres : Trimeshes, ConvexPolyhedrons and Compound Shapes - Three.js Tutorials
Here is a compound shape of 4 spheres and a box : Car Physics - Three.js Tutorials
Here is a compound of spheres that you can try and land on a floating box : Land on a Square - Three.js Tutorials
You can also use blender to instead create an invisible geometry that you can then use a collision boundary. You would travers your loaded glTF, find that collision boundary that you created in blender, and create a Trimesh from that.
Instead of these lines 88-95:
const position = buffergeo.getAttribute( 'position' );
const points = [];
for (let i = 0; i < position.count; i ++) {
points.push(
new THREE.Vector3(position.getX(i), position.getY(i), position.getZ(i))
);
}
Try this way:
const position = buffergeo.getAttribute( 'position' );
const points = [];
for (let i = 0; i < position.count; i ++)
points.push(
new THREE.Vector3(position.getX(i), position.getY(i), position.getZ(i))
);
Result:
Thanks, it worked, but I don’t understand the difference. Care to explain a bit?
The buffer array may be larger than needed, and the actual data is just a portion of it. When you use all the array, you will also use some extra data.
