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

Однако проблема заключается в том, что когда "пол" вращается взад и вперед, сферы застревают и иногда даже падают сквозь пол. Вот пример для codepen - https://codepen.io/danlong/pen/qJwMBo

Переместите мышь вверх и вниз по экрану, чтобы увидеть это в действии.

Есть ли лучший или другой способ, которым я должен вращать "пол", сохраняя при этом движение сферы?

Answer 1

Непосредственная (то есть "мгновенная") установка положения / поворота, вероятно, нарушит обработку столкновений во всех физических движках, включая cannon.js. Фактически вы телепортируете вещи в космос, заставляя объекты застрять или проходить сквозь них.

Что вы должны сделать, это

• Установите скорость (.velocity и.angularVelocity) или примените силы к телам Cannon.js
• Скопируйте преобразование этих тел в ваши визуальные сетки (обратите внимание, что это прямо противоположно тому, что вы сейчас делаете в коде)

Определение правильного количества силы, которую нужно применить, чтобы получить желаемое визуальное поведение, обычно является сложной задачей.