Question

我正在将Cannon.js与Three.js一起使用。

我创建了一个由1个高度场和5个球组成的场景。我希望球可以使用cannon.js物理学在高度场上滚动。

在鼠标移动时，我沿y轴旋转高度场，以使球体来回滚动。

我有一个更新循环，该循环从cannon.js复制球体位置和四元数，并应用于three.js的可视球体。高度字段也与three.js视觉地板同时更新。两者都在requestAnimationFrame中的for循环中运行。

updateMeshPositions() {

    for (var i = 0; i !== this.meshes.length; i++) {
        this.meshes[i].position.copy(this.bodies[i].position);
        this.meshes[i].quaternion.copy(this.bodies[i].quaternion);

        this.hfBody.position.copy(this.mesh.position);
        this.hfBody.quaternion.copy(this.mesh.quaternion);
    }
}

但是，问题是，当“地板”来回旋转时，球体被卡住，有时甚至掉落在地板上。这是有关代码笔的示例-https://codepen.io/danlong/pen/qJwMBo

在屏幕上上下移动鼠标以查看实际效果。

在保持球体运动的同时，还有一种更好或不同的方式来旋转“地板”吗？

Answer 1

直接（即“立即”）设置位置/旋转可能会破坏所有物理引擎（包括cannon.js）中的碰撞处理。实际上，您是在通过太空传送物体，从而导致物体卡在彼此之间或穿过彼此。

您应该做的是

设置速度（.velocity和.angularVelocity）或向Cannon.js实体施加力
将这些物体的变换复制到视觉网格中（注意，这与您当前在代码中所做的事情完全相反）

确定正确的力量量以获得理想的视觉行为通常是棘手的部分。

Cannon.js-如何防止对象在更新时被裁剪为“ floor”

1 个答案: