Библиотека Cannon.js предоставляет мощный инструментарий для
симуляции физики в браузере, включая обработку столкновений объектов.
Одним из ключевых механизмов является событие collide,
которое позволяет реагировать на контакт тел в реальном времени.
collideСобытие collide генерируется объектами типа
Body. Подписка осуществляется с использованием метода
addEventListener или альтернативного синтаксиса
on. Основная сигнатура выглядит следующим образом:
body.addEventListener('collide', function(event) {
console.log(event);
});
Основные моменты:
removeEventListener для удаления
подписки.function handleCollision(event) {
console.log(event.contact);
}
body.removeEventListener('collide', handleCollision);
Объект события, передаваемый обработчику, содержит ключевую информацию о столкновении. Основные свойства:
body — объект типа Body,
с которым произошло столкновение.target — тело, на котором
зарегистрирован слушатель (body текущего контекста).contact — объект контакта, содержащий
сведения о точке и нормали столкновения.impactVelocity — относительная
скорость тел в точке контакта.Пример доступа к данным контакта:
body.addEventListener('collide', function(event) {
const otherBody = event.body;
const contact = event.contact;
const impactVelocity = event.contact.getImpactVelocityAlongNormal();
console.log('Столкновение с:', otherBody.id);
console.log('Скорость удара:', impactVelocity);
console.log('Точка контакта:', contact.ri, contact.rj);
});
ContactEquationКонтакт между телами описывается через ContactEquation.
Основные свойства и методы:
ni — нормаль контакта, направленная от
тела i к телу j.ri, rj —
радиус-векторы точек контакта относительно центров масс тел
i и j.getImpactVelocityAlongNormal() —
вычисляет скорость сближения тел по нормали контакта.bi, bj —
ссылки на тела, участвующие в контакте.Пример использования нормали и точек контакта:
body.addEventListener('collide', function(event) {
const contact = event.contact;
console.log('Нормаль контакта:', contact.ni);
console.log('Локальная точка на теле i:', contact.ri);
console.log('Локальная точка на теле j:', contact.rj);
});
Звуковые эффекты столкновений На основе
impactVelocity можно варьировать громкость или тип звука
удара.
Визуальные эффекты Создание вспышек, искр или
частиц в точке контакта с координатами ri и
rj.
Физическая реакция на столкновение Применение дополнительных сил или импульсов при контакте с определёнными объектами.
Игровая логика Учет столкновений для подсчета очков, срабатывания триггеров или разрушения объектов.
collide вызывается только при активной
симуляции физического мира (world.step()).CompoundShape) событие будет генерироваться для каждой
пары столкнувшихся форм.impactVelocity и координаты ri,
rj зависят от масштаба времени симуляции, поэтому при
высоких timeStep возможна потеря точности.event.body или тегам.Эта система событий в Cannon.js обеспечивает точный контроль над физикой столкновений и позволяет строить интерактивные и динамичные приложения с реалистичными реакциями объектов.