Cannon.js - как предотвратить обрезку объектов "пол" при обновлении

Я использую 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);
    }
}

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

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

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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
794
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Что тебе следует сделать, это

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

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

Ах, я понимаю, это имеет смысл, если вы так выразились. Спасибо за совет, я воплощу эти идеи и посмотрю, как у меня дела.

danlong 30.10.2018 10:27

Другие вопросы по теме