three.js使用cannon.js 进行不规则物体碰撞检测-CSDN博客

本文链接：https://blog.csdn.net/printf_hello/article/details/145224748

优化点
使用形状类似但点更少的物体进行拆解如右侧模型
在这里插入图片描述

使用vhacd-js将负责的模型拆分成多个小模型
在这里插入图片描述

import { ConvexMeshDecomposition } from “vhacd-js”;

const rocketBody = new CANNON.Body({ mass: 10 });
const decomposer = await ConvexMeshDecomposition.create();
const options = { maxHulls: 64 };

const data = decomposer.computeConvexHulls({
         positions: mesh.geometry.attributes.position.array,
         indices: mesh.geometry.index.array},
         options)

data.forEach(({ positions, indices }) => {
     const vertices: CANNON.Vec3[] = [];
     const faces: number[][] = [];

     for (let index = 0; index < Object.keys(positions).length; index += 3) {
         vertices.push(new CANNON.Vec3(positions[index], positions[index + 1], positions[index + 2]));
     }

     for (let index = 0; index < Object.keys(indices).length; index += 3) {
         faces.push([indices[index], indices[index + 1], indices[index + 2]]);
     }

     const part = new CANNON.ConvexPolyhedron({ vertices, faces });

     rocketBody.addShape(part);
 });

this.world.addBody(rocketBody);

如此就添加了可用的形状

控制台可能会出现警告和报错但不影响使用
.faceNormals[${i}] = Vec3(${n.toString()}) looks like it points into the shape? The vertices follow. Make sure they are ordered CCW around the normal, using the right hand rule.

优化可将拆分的数据保存缓存使用拆包过程开销很大会卡顿阻塞网页会卡顿数秒