rtftpcf v0.0.3

rtftpcf

React three fiber third person camera follow and controls.

import RtftPcf from "rtftpcf";
const [stick, setStick] = useState({
  angle: 90,
  distance: 0,
  direction: {
    x: "center",
    y: "center",
    angle: "center",
  },
});
<RtftPcf stick={stick} />;

Accepted props

cameraOptions

type: Object cameraOptions must have object for control's.

cameraOptions={{
        yOffset: 1.6,
        minDistance: 0.6,
        maxDistance: 7,
        collisionFilterMask: 2,
        maxPolarAngle: Math.PI / 2,
        cameraCollisionOn: true,
      }}

characterObj

type: THREE.Object3D characterObj three js object for.

const characterObj = useFBX(`character.fbx`);

characterProps

type: object characterProps object for.

characterProps = {
  scale: 1.75,
  velocity: 8,
  radius: 0.5,
  position: [-5, 0, 0],
};

animationPaths

type: array characterProps array for. Minimum required two idle and walk. file format fbx, glb or gltf.

const animationPaths = [
  {
    name: "idle",
    path: "/idle.glb",
  },
  {
    name: "walk",
    path: "/walk.glb",
  },
];

All animation names

[
  {
    name: "idle",
    path: "",
  },
  {
    name: "walk",
    path: "",
  },
  {
    name: "walkBackward",
    path: "",
  },
  {
    name: "turnLeft",
    path: "",
  },
  {
    name: "turnRight",
    path: "",
  },
];

userKeyMap

type: object userKeyMap object for custom key asign.

const userKeyMap = {
  arrowUp: "ArrowUp",
  arrowDown: "ArrowDown",
  arrowRight: "ArrowRight",
  arrowLeft: "ArrowLeft",
};

blockedKeys

type: object blockedKeys object for block keys. more info

const blockedKeys = {
  32: 32,
};

callBack

type: function callBack for WIP.

onLoad

type: function onLoad for WIP.