Cannon-es-debugger и three-cannon-debugger

Для работы с библиотеками cannon-es-debugger и three-cannon-debugger необходимо наличие базового окружения с Three.js и cannon-es. Установка через npm выполняется командой:

npm install cannon-es cannon-es-debugger three-cannon-debugger

После установки модули импортируются в проект:

import * as CANNON from 'cannon-es';
import CannonDebugger from 'cannon-es-debugger';
import ThreeCannonDebugger from 'three-cannon-debugger';

cannon-es-debugger обеспечивает визуализацию тел и их коллизий в 3D-сцене без прямой зависимости от Three.js, тогда как three-cannon-debugger интегрируется непосредственно с объектами Three.js, синхронизируя физические тела и графику.

Основы работы с cannon-es-debugger

Создание сцены и мира:

const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;

Создание тел:

const sphereShape = new CANNON.Sphere(1);
const sphereBody = new CANNON.Body({
    mass: 5,
    position: new CANNON.Vec3(0, 10, 0),
});
sphereBody.addShape(sphereShape);
world.addBody(sphereBody);

Инициализация cannon-es-debugger:

const cannonDebugger = new CannonDebugger(world, {
    color: 0xff0000,
    scale: 1
});
  • world — объект мира cannon-es.
  • color — цвет визуализации.
  • scale — масштаб отображаемых тел.

Обновление визуализации в цикле анимации:

function animate() {
    requestAnimationFrame(animate);
    world.step(1 / 60);
    cannonDebugger.update();
}
animate();

update() автоматически синхронизирует позиции и ориентацию тел, отображая их в виде каркасных фигур.

Основы работы с three-cannon-debugger

Создание визуализатора для Three.js:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Инициализация three-cannon-debugger:

const debugger3D = new ThreeCannonDebugger(scene, world, {
    color: 0x00ff00,
    scale: 1
});

Синхронизация тел и объектов Three.js:

  • Все тела cannon-es визуализируются в сцене Three.js как каркасные меши.
  • Поддерживается автоматическая синхронизация позиции, вращения и масштаба.
  • Можно использовать кастомные материалы или настроить прозрачность.
function animate() {
    requestAnimationFrame(animate);
    world.step(1 / 60);
    debugger3D.update();
    renderer.render(scene, camera);
}
animate();

Важные особенности и настройки

  1. Цвет и прозрачность: Можно задавать color и opacity для визуализируемых тел, что облегчает отладку сложных коллизий.

  2. Масштабирование: Параметр scale помогает подгонять размеры визуализаторов под единицы сцены Three.js.

  3. Фильтрация тел: В three-cannon-debugger есть возможность визуализировать только определённые типы тел (например, только сферы или ящики), используя filter:

const debugger3D = new ThreeCannonDebugger(scene, world, {
    filter: body => body.shapes[0] instanceof CANNON.Sphere
});
  1. Оптимизация производительности: Для больших сцен обновление визуализаторов может быть затратным. Рекомендуется вызывать update() один раз на кадр, а для статичных тел можно отключить их обновление.

Интеграция с пользовательскими объектами

  • Можно привязать визуализатор к существующим объектам Three.js, чтобы каркасное отображение совпадало с реальной геометрией.
  • Поддерживается автоматическое удаление визуализированных тел при удалении их из мира:
world.removeBody(sphereBody);
debugger3D.removeBody(sphereBody);
  • Для динамических сцен с множеством объектов использование three-cannon-debugger упрощает отладку коллизий и гравитационных эффектов.

Практические советы

  • Использовать cannon-es-debugger для быстрой проверки физики без сцены Three.js.
  • Использовать three-cannon-debugger, если важна визуальная интеграция с 3D-моделью.
  • Настраивать цвет и прозрачность тел для удобства визуальной отладки.
  • Вызывать update() после каждого шага мира, чтобы избежать рассинхронизации.
  • Для сложных симуляций объединять фильтры и оптимизацию обновления, чтобы не перегружать рендеринг.

Эти библиотеки позволяют видеть физическую логику cannon-es в реальном времени, упрощая отладку и тестирование сложных физических сцен в браузере.

Оглавление