Cannon.js创建静态地面球体穿透及动态赋值mass失效问题求助

1. 静态地面无法阻止球体穿透下落 #

问题原因 #

你只同步了平面的物理位置到渲染网格，没有同步物理刚体的旋转状态：

• Cannon.js 中你已经将平面刚体绕X轴旋转了90度作为地面
• Three.js 渲染层的平面网格你单独设置了旋转，没有和物理刚体的旋转同步，导致视觉上的平面和实际碰撞检测的平面朝向完全错位，球体看起来是穿透地面下落，实际是没有和物理平面产生有效碰撞

修复方案 #

在动画循环的同步逻辑中，添加平面旋转的同步代码：

sphere.position.copy(sphereBody.position);
plane.position.copy(planeBody.position);
// 新增以下代码同步旋转
plane.quaternion.copy(planeBody.quaternion);

额外检查点 #

你的代码中已经正确将平面刚体mass设为0（静态刚体不受重力影响）、添加了碰撞形状、加入了物理世界，这部分逻辑无需修改。

2. 实例化后修改mass属性失效 #

问题原因 #

Cannon.js 不支持直接修改mass属性生效，质量参数关联了刚体的惯性、运动状态等多个内部属性，只有在构造函数传参时会自动触发属性更新，实例化后直接赋值mass不会触发内部重计算，所以功能失效。

修复方案 #

修改mass后主动调用updateMassProperties()方法触发内部属性更新：

const planeBody = new CANNON.Body()
planeBody.mass = 1;
// 新增以下代码触发质量属性更新
planeBody.updateMassProperties();

额外优化建议 #

你现有代码中的deltaTime计算存在错误，会导致物理模拟速度异常，修改为以下逻辑即可：

let ElapsedTime = clock.getElapsedTime();
let deltaTime = ElapsedTime - oldElapsedTime;
// 原代码oldElapsedTime = deltaTime是错误的，改为赋值为当前总时长
oldElapsedTime = ElapsedTime;

内容的提问来源于stack exchange，提问作者Tariq Almalki