react-three-fiber-player

React Three Fiber Player

React three fiber player allows you to move a 3d character in 3d world.

Installation

npm install react-three-fiber-player
yarn add react-three-fiber-player

Usage

import ReactThreeCharacterController from "react-three-fiber-player";
const gltf = useGLTF("character.glb");
const characterProps = {
  speed: 4, // default speed 3
  scale: 1, // default scale 1
  position: [0, 0, 0], // default position [0,0,0] or change like [-5,0,0]
  rotation: [0, Math.PI, 0], // default rotation [0,0,0] or change like [0,2,0]
};

const cameraControl = {
  minDistance: 6,
  maxDistance: 8,
  camrraOffset: 1.5,
  maxPolarAngle: Math.PI / 1.8,
};

const requiredAnimation = {
  noAnimation: "noAnimation",
  idle: "idle",
  walk: "walk",
  run: "run",
};
<ReactThreeCharacterController
  gltf={gltf}
  characterProps={characterProps}
  cameraControl={cameraControl}
  requiredAnimation={requiredAnimation}
  cameraCollision={true} //EXPERIMENTAL, NOT USED IN PRODUCTION YET
/>;

Roadmap

• Custom animation can play.
• Custom Movement keys.
• Collision with other rendered models.
• Camera Collision.

Features

• Character movements with default keys(W,S,A,D).
• 🎇 Provide character gltf with required animations and it's done 🎇