Установка и подключение к проекту

Cannon.js — это физический движок для JavaScript, ориентированный на симуляцию твёрдого тела в 3D. Он обеспечивает реалистичное взаимодействие объектов, столкновения, гравитацию и поддержку различных форм коллизий. Для начала работы с библиотекой необходимо правильно установить её и подключить к проекту.

Способы установки

Cannon.js можно подключить несколькими способами в зависимости от структуры проекта.

Через npm

Если проект использует Node.js и систему сборки (Webpack, Vite, Parcel), оптимальным будет установка через npm:

npm install cannon

После установки можно импортировать библиотеку в файлы Jav * aScript:

import * as CANNON from 'cannon';

Использование ES6 модулей позволяет удобно работать с пространствами имён и поддерживает Tree Shaking для уменьшения размера сборки.

Через CDN

Для проектов, где нет сборщика модулей, удобно подключение через CDN. Вставка скрипта в HTML обеспечит доступ к объекту CANNON глобально:

<script src="https://cdn.jsdelivr.net/npm/cannon/build/cannon.min.js"></script>

После подключения можно создавать мир и объекты без импорта:

const world = new CANNON.World();

Настройка мира

После подключения Cannon.js основной шаг — создание физического мира:

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // задаём гравитацию по оси Y
world.broadphase = new CANNON.NaiveBroadphase(); // простая проверка коллизий
world.solver.iterations = 10; // точность решения уравнений движения

Ключевые моменты:

  • gravity определяет ускорение свободного падения, обычно по оси Y.
  • broadphase отвечает за предварительную фильтрацию возможных столкновений для повышения производительности.
  • solver.iterations влияет на точность расчёта сил и реакций при столкновениях.

Создание тел

Физические объекты создаются через CANNON.Body, которому присваивается масса и форма:

const sphereShape = new CANNON.Sphere(1); // сфера радиусом 1
const sphereBody = new CANNON.Body({
    mass: 5, // масса объекта
    position: new CANNON.Vec3(0, 10, 0), // начальная позиция
    shape: sphereShape
});
world.addBody(sphereBody);

Особенности:

  • Объект с нулевой массой (mass: 0) становится статическим — он не двигается, но участвует в столкновениях.
  • Форма (shape) определяет границы для расчёта коллизий. Доступны Box, Sphere, Plane, Cylinder, ConvexPolyhedron и другие.

Обновление мира

Для симуляции движения необходимо регулярно обновлять мир, используя шаг интеграции:

const timeStep = 1 / 60; // 60 кадров в секунду

function updatePhysics() {
    world.step(timeStep);

    // пример синхронизации с визуализацией
    sphereMesh.position.copy(sphereBody.position);
    sphereMesh.quaternion.copy(sphereBody.quaternion);

    requestAnimationFrame(updatePhysics);
}

updatePhysics();

Ключевые моменты:

  • world.step(timeStep) рассчитывает новые позиции и ориентации всех тел.
  • timeStep определяет точность симуляции; слишком большой шаг может вызвать нестабильность.
  • Для синхронизации с Three.js или Babylon.js требуется копировать позиции и вращения физических тел в графические объекты.

Организация проекта

  • Для проектов с модульной структурой рекомендуется хранить физику отдельно от визуализации.
  • Cannon.js совместим с современными сборщиками, что позволяет использовать имена классов и методы без глобальных переменных.
  • Поддерживается работа с множеством тел, но при больших сценах стоит использовать оптимизации — статические объекты, sleep для тел, неактивных длительное время, и эффективный broadphase.

Подключение дополнительных модулей

Некоторые форки Cannon.js (например, cannon-es) предлагают поддержку ES6-модулей и дополнительные возможности:

import * as CANNON from 'cannon-es';

Преимущество — современный синтаксис, удобство сборки и интеграция с TypeScript, что облегчает проверку типов и автокомплит в IDE.

Использование Cannon.js начинается с правильного подключения, создания мира, настройки гравитации, определения тел и их форм, а также корректного шага симуляции. Эти основы позволяют строить сложные физические сцены и интегрировать их с визуализацией, обеспечивая реалистичное поведение объектов.

Оглавление