Physics-Based Player Controller в Three.js с использованием Rapier Physics

TL;DR: В статье рассмотрим создание физически реалистичного контроллера игрока для 3D-сцен с использованием Three.js и Rapier Physics. Разберёмся с интеграцией движка, обработкой ввода и реализацией базовых движений, таких как прыжки и спринт.

Введение: Контекст и актуальность

Создание реалистичного и отзывчивого контроллера игрока — одна из ключевых задач при разработке 3D-игр и интерактивных приложений. Современные движки, такие как Unity и Unreal Engine, предлагают готовые решения, но для проектов на основе веб-технологий часто требуется более гибкий подход. Three.js, популярная библиотека для работы с 3D-графикой в браузере, в сочетании с физическим движком Rapier Physics, позволяет создавать сложные и реалистичные системы управления игроком.

В этой статье мы разберём, как создать физически реалистичный контроллер игрока, поддерживающий прыжки, спринт и управление с клавиатуры, геймпада и сенсорного экрана.

Основная часть: Интеграция Rapier Physics и Three.js

Для начала нам нужно интегрировать Rapier Physics в проект на основе Three.js. Rapier — это мощный физический движок, написанный на Rust, который предоставляет API для JavaScript через WebAssembly. Это делает его идеальным выбором для использования в браузере.

import * as THREE from 'three';
import * as RAPIER from '@dimforge/rapier3d';

// Инициализация сцены Three.js
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);

// Инициализация Rapier Physics
const gravity = { x: 0.0, y: -9.81, z: 0.0 };
const world = new RAPIER.World(gravity);

// Создание физического тела игрока
const playerBodyDesc = RAPIER.RigidBodyDesc.kinematicPositionBased();
const playerBody = world.createRigidBody(playerBodyDesc);
const playerColliderDesc = RAPIER.ColliderDesc.cuboid(0.5, 1.8, 0.5);
world.createCollider(playerColliderDesc, playerBody);

// Создание визуального представления игрока в Three.js
const playerGeometry = new THREE.BoxGeometry(1, 3.6, 1);
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const playerMesh = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(playerMesh);

Обработка ввода и управление игроком

Для управления игроком нам нужно обрабатывать ввод с клавиатуры, геймпада и сенсорного экрана. В этом примере мы сосредоточимся на клавиатурном вводе.

const keys = {};

window.addEventListener('keydown', (event) => {
  keys[event.code] = true;
});

window.addEventListener('keyup', (event) => {
  keys[event.code] = false;
});

function updatePlayerMovement(deltaTime) {
  const velocity = { x: 0, y: 0, z: 0 };

  if (keys['KeyW']) velocity.z -= 1;
  if (keys['KeyS']) velocity.z += 1;
  if (keys['KeyA']) velocity.x -= 1;
  if (keys['KeyD']) velocity.x += 1;

  if (keys['Space']) velocity.y += 1;

  playerBody.setLinvel({ x: velocity.x, y: velocity.y, z: velocity.z }, true);
}

Реализация прыжков и спринта

Для добавления прыжков и спринта нам нужно учитывать состояние игрока и применять соответствующие силы.

let isJumping = false;
let isSprinting = false;

function handleJump() {
  if (!isJumping && keys['Space']) {
    playerBody.setLinvel({ x: 0, y: 5, z: 0 }, true);
    isJumping = true;
  }
}

function handleSprint() {
  isSprinting = keys['ShiftLeft'];
}

function updatePlayerMovement(deltaTime) {
  const speed = isSprinting ? 2 : 1;
  const velocity = { x: 0, y: 0, z: 0 };

  if (keys['KeyW']) velocity.z -= speed;
  if (keys['KeyS']) velocity.z += speed;
  if (keys['KeyA']) velocity.x -= speed;
  if (keys['KeyD']) velocity.x += speed;

  handleJump();
  handleSprint();

  playerBody.setLinvel({ x: velocity.x, y: velocity.y, z: velocity.z }, true);
}

Практическое применение

Созданный контроллер можно использовать в различных проектах, от интерактивных 3D-демо до полноценных браузерных игр. Возможность интеграции с геймпадом и сенсорным управлением делает его универсальным инструментом для разработки кросс-платформенных приложений.

Заключение

В этой статье мы рассмотрели основы создания физически реалистичного контроллера игрока с использованием Three.js и Rapier Physics. Мы интегрировали физический движок, реализовали обработку ввода и добавили базовые движения, такие как прыжки и спринт. Этот подход можно расширять и адаптировать под конкретные задачи, создавая всё более сложные и реалистичные системы управления.

Источник: https://henryegloff.com/projects/inner-space/