React 3rd Person Character

A fast, minimal library designed to simplify the implementation of third-person interactive characters in 3D web scenes, using the latest ecosystem of 3D libraries for React.

Demo

Live CodeSandbox Demo (opens in a new tab)
More examples will be added soon.

What This Library Solves

Managing compatibility across physics engines, three.js, and React-specific 3D libraries can be painful and time-consuming.

This library abstracts and integrates:

• react-three-fiber (opens in a new tab)
• @react-three/drei (opens in a new tab)
• @react-three/rapier (opens in a new tab)
• three (opens in a new tab)
• xstate (opens in a new tab) (for character state management)

You do not need to install or manage these dependencies manually. The library re-exports all required modules.

Quick Start

npm install react-3rd-person-character

import {
  CharacterConfigProvider,
  ExperienceWrapper,
  Player,
  Scenario,
  StyledMobileControls,
  FIBER,
  THREE,
} from "react-3rd-person-character";
 
export default function App() {
  return (
    <CharacterConfigProvider character={characterConfig}>
      <FIBER.Canvas>
        <ExperienceWrapper>
          <Scenario />
          <Player />
        </ExperienceWrapper>
      </FIBER.Canvas>
      <StyledMobileControls />
    </CharacterConfigProvider>
  );
}

Features

• Modular Architecture: Separate packages for physics, controls, and core functionality
• State Management: XState-driven character state machine
• Physics Integration: Built-in Rapier physics with spring simulators
• Mobile Controls: Touch-friendly mobile controls with customizable UI
• TypeScript Support: Full TypeScript support with comprehensive type definitions
• Fluent API: CharacterBuilder for easy character configuration