Three.js сама по себе является библиотекой для рендеринга 3D-графики в браузере и не содержит встроенного физического движка. Для реализации сил, импульсов и ограничений часто используется интеграция с внешними физическими движками, такими как Cannon.js, Ammo.js или Oimo.js. Физические объекты создаются отдельно и синхронизируются с визуальными объектами Three.js.
Физический объект описывается следующими ключевыми параметрами:
mass) — определяет, как объект
реагирует на силы и импульсы. Объект с нулевой массой считается
статическим.position) — координаты в
пространстве, соответствующие mesh.position в
Three.js.velocity) — вектор скорости,
обновляющийся под действием сил.momentum) — произведение
массы на скорость. В симуляциях часто используется для мгновенного
изменения движения объекта.force) — вектор, влияющий на
ускорение объекта по закону Ньютона: F = m * a.Сила применяется непрерывно, изменяя скорость объекта с течением времени. Например, чтобы создать гравитацию:
const gravity = new CANNON.Vec3(0, -9.82, 0);
body.applyForce(gravity, body.position);
Здесь body — физическое тело, а applyForce
принимает вектор силы и точку приложения (обычно центр масс).
Импульс изменяет скорость мгновенно:
const impulse = new CANNON.Vec3(0, 10, 0);
body.applyImpulse(impulse, body.position);
Импульс особенно полезен для моделирования столкновений, ударов или стартового движения объектов.
Ограничения используются для связывания объектов и управления их относительным движением. В физике Three.js через Cannon.js или Ammo.js доступны следующие типы:
Пример создания точечного соединения:
const pivotA = new CANNON.Vec3(0, 1, 0);
const pivotB = new CANNON.Vec3(0, -1, 0);
const constraint = new CANNON.PointToPointConstraint(bodyA, pivotA, bodyB, pivotB);
world.addConstraint(constraint);
Физический движок оперирует собственными структурами данных, поэтому объекты Three.js необходимо синхронизировать на каждом кадре:
function animate() {
world.step(timeStep);
mesh.position.copy(body.position);
mesh.quaternion.copy(body.quaternion);
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
timeStep задаёт шаг симуляции (обычно 1/60 секунды). Для
точности симуляции важно выбирать постоянный шаг времени.
Физика в Three.js через внешние движки открывает возможности реалистичного моделирования движения, сил и ограничений, обеспечивая гибкость при создании интерактивных 3D-сцен.