Cannon.js

Question

我正在使用 Cannon.js 和 Three.js。

我创建了一个场景，其中包含 1 个高度场和 5 个球。我希望球在高度场周围滚动，使用 cannon.js 物理学。

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

我有一个更新循环，它从 cannon.js 复制球体位置和四元数并应用于 three.js 的视觉球体。高度场也与 three.js 视觉楼层同时更新。这两个运行在 for 循环中，在 requestAnimationFrame.

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);
    }
}

然而，问题是当'floor'来回旋转时，球体会卡住，有时甚至会从地板上掉下来。这是 codepen 上的示例 - https://codepen.io/danlong/pen/qJwMBo

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

在保持球体移动的同时旋转 'floor' 是否有更好或不同的方法？

Answer 1

直接（即 "instantly"）设置 position/rotation 可能会破坏所有物理引擎中的碰撞处理，包括 cannon.js。实际上，您是通过 space 传送物体，导致物体卡在或穿过彼此。

你应该做的是

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

确定适当的力来获得所需的视觉行为通常是棘手的部分。

Cannon.js - 如何防止对象在更新时剪裁 'floor'

Cannon.js - How to prevent objects clipping 'floor' on update

three.js

game-physics