react-three-character-controller

React Three Character Controller

React three fiber third person camera follow and character controls. Pass GSAP as a props.

Installation

npm install react-three-character-controller
yarn add react-three-character-controller

Usage

import ReactThreeCharacterController from "react-three-character-controller";
const gltf = useGLTF("character.glb");
const customKeyMap = {
  ArrowUp: "forward",
  ArrowDown: "backward",
  ArrowLeft: "left",
  ArrowRight: "right",
};
const requiredAnimation = {
  noAnimation: "noAnimation",
  idle: "Idle",
  walk: "Walk",
  run: "Run",
  walkBackward: "WalkBackward",
  turnLeft: "Turn",
  turnRight: "Turn",
};
const characterProps = {
  speed: 3, // default speed 3
  rotationSpeed: 30, // default rotation speed 20
  scale: 1.3, // default scale 1
  position: [0, 0, 0], // default position [0,0,0] or change like [-5,0,0]
  rotation: [0, 0, 0], // default rotation [0,0,0] or change like [0,2,0]
};

<ReactThreeCharacterController
  gsap={gsap}
  gltf={gltf}
  customKeyMap={customKeyMap}
  requiredAnimation={requiredAnimation}
  characterProps={characterProps}
/>;

Features

• Character movements with default keys(W,S,A,D).
• Custom key's for character movement.
• ✨Just pass character glb with required animations and it's done ✨