Hey,
Now I am applying the react-three-cannon to do the collision.
I grab a object to hit another object. After two objects collided, the collide events were triggered.
But after that, it became really slow when I try to move the first person camera. Seems like jump into loop.
This two objects are all using useConvexPolyhedron from react three cannon to create convex colliders.
At first,I have the error that “Cannot read property ‘x’ of undefined”.
But After I use the Quickhull.js provided on the other master to create the face value, It’s alright.
Although it still performance too bad after two objects hit together.
Did anyone face this before and have some solutions or suggestions for it ?
It will be a good help for me, Thanks!
I will attached code snippet and Quickhull.js file.
const getCollide = (child, transform) => {
console.log(child.geometry.attributes.position);
console.log(child.geometry.attributes.position.count);
let geo = child.geometry.clone();
const modifier = new SimplifyModifier();
const count = Math.floor(
geo.attributes.position.count < 500
? 0
: geo.attributes.position.count > 500 &&
geo.attributes.position.count < 2500
? geo.attributes.position.count * 0.05
: geo.attributes.position.count > 2500 &&
geo.attributes.position.count < 5000
? geo.attributes.position.count * 0.1
: geo.attributes.position.count > 2500 &&
geo.attributes.position.count < 5000
? geo.attributes.position.count * 0.15
: geo.attributes.position.count > 5000 &&
geo.attributes.position.count < 15000
? geo.attributes.position.count * 0.18
: geo.attributes.position.count > 15000 &&
geo.attributes.position.count < 30000
? geo.attributes.position.count * 0.2
: geo.attributes.position.count > 30000 &&
geo.attributes.position.count < 40000
? geo.attributes.position.count * 0.4
: geo.attributes.position.count > 40000 &&
geo.attributes.position.count < 45000
? geo.attributes.position.count * 0.5
: geo.attributes.position.count > 45000
? geo.attributes.position.count * 0.6
: geo.attributes.position.count * 0.7
); // number of vertices to remove
geo = modifier.modify(geo, count);
const geometry = new Geometry().fromBufferGeometry(geo);
// Apply parentTransform to the geometry
geometry.applyMatrix4(transform);
geometry.translate(child.position.x, child.position.y, child.position.z);
geometry.scale(child.scale.x, child.scale.y, child.scale.z);
geometry.scale(scale[0], scale[1], scale[2]);
geometry.rotateX(child.rotation._x);
geometry.rotateY(child.rotation._y);
geometry.rotateZ(child.rotation._z);
geometry.computeFaceNormals();
geometry.computeFlatVertexNormals();
geometry.computeVertexNormals();
const vertices = geometry.vertices.map((v) => new Vector3().copy(v));
const faces = QuickHull.createHull(vertices);
return (
<CollideModelMesh
id={id}
position={position}
rotation={rotation}
scale={scale}
gltf={gltf}
args={[vertices, faces]}
triggerClick={triggerClick}
hasBehaviours={hasBehaviours}
grabPosition={grabPosition}
/>
);
};
const CollideModelMesh = ({
id,
position,
rotation,
scale,
gltf,
args,
triggerClick,
hasBehaviours,
grabPosition,
}) => {
const [ref, api] = useConvexPolyhedron(() => ({
type: "Dynamic",
position: position,
rotation: rotation,
scale: scale,
args: args,
onCollide: (e) => {
console.log("hit");
console.log(id);
if (hasBehaviours) {
triggerClick();
}
},
}));
useEffect(() => {
api.velocity.set(grabPosition[0], grabPosition[1], grabPosition[2]);
}, [grabPosition]);
return (
<>
{gltf && (
<mesh
ref={ref}
position={position}
rotation={rotation}
scale={scale}
castShadow
receiveShadow
>
<primitive object={gltf.scene} />
</mesh>
)}
</>
);
};
QuickHull.zip (9.9 KB)
Here is the video
