Skip to content

205. 综合实战:开放世界(六)

Published:

上节实现了上台阶:

2025-12-14 18.05.44.gif

但其实还有一部分没做完:

2025-12-14 18.16.05.gif

平台的物理世界的刚体没加。

所以视觉上的平台在物理世界不存在,走到上面会掉下去。

我们加一下:

image.png

z 方向要加上台阶的横向深度,然后是平台深度的一半。

也就是这样:

image.png

y 方向则是台阶总高度减去平台高度的一半。

image.png

这样就能算出平台的位置。

// 平台的物理碰撞体(顶面应该和斜坡顶端高度一致)
const platformThickness = 0.2;
const platformBody = new CANNON.Body({
    mass: 0,
    position: new CANNON.Vec3(
        x,
        y + totalStairsHeight - platformThickness / 2, // 平台顶面高度
        z + stepCount * stepDepth + platformDepth / 2
    )
});
platformBody.addShape(new CANNON.Box(new CANNON.Vec3(stepWidth / 2, platformThickness / 2, platformDepth / 2)));
world.addBody(platformBody);

试下效果:

2025-12-14 18.26.06.gif

这样,就能走到平台上了。

也就是视觉上、物理上,都有这个平台才行。

当然,你还可以下来:

2025-12-14 18.27.17.gif

跳上去:

2025-12-14 18.28.08.gif

案例代码上传了小册仓库

总结

上节落下了平台的物理刚体,这导致走到平台上会掉下去。

threejs 画的只是视觉,需要在 cannon 物理世界添加对应形状的刚体才行。

但是这个刚体不需要和视觉上那么细致的形状,大概形状就行,比如人可以用圆柱体。

一般都会在建模软件里勾勒一个隐藏的只有几个顶点的形状,threejs 里解析出来,用它来定义自定义形状的刚体,这样计算量小,物理效果又很真实。

评论