Installation

Install Klipp and pick the right entry point.

pnpm add @pmndrs/klipp

The core and each integration have their own entry point. Each one only needs the libraries it adapts to, all of them optional peer dependencies:

Entry point	What's in it	Install as well
`@pmndrs/klipp`	The core: `Klipp`, `VirtualCamera`, every piece as a class, and the data and functions underneath.	nothing
`@pmndrs/klipp/three`	The core classes for three.js, ending in `Three`: they read `Object3D` targets and drive a `PerspectiveCamera` or an `OrthographicCamera`.	`three`
`@pmndrs/klipp/react`	React Three Fiber components, built on the three.js classes.	`three`, `react`, `@react-three/fiber`
`@pmndrs/klipp/dom`	Mouse, touch and wheel input, and debug overlays.	nothing, runs in a browser

Vectors in the core are plain arrays from math: [x, y, z] and [x, y, z, w]. Add it to your dependencies to use its vec3 and quat functions. Constants like BlendCurves always come from the core.

Usage

import { Klipp, FollowBody, HardLookAtAim, targetPose, BlendCurves } from '@pmndrs/klipp';

pnpm add three

import { BlendCurves } from '@pmndrs/klipp';
import { KlippThree, FollowBodyThree, HardLookAtAimThree } from '@pmndrs/klipp/three';

pnpm add three react @react-three/fiber

import { BlendCurves } from '@pmndrs/klipp';
import { Klipp, VirtualCamera, Body, Aim } from '@pmndrs/klipp/react';

Your first camera builds a complete scene with each of them.

Edit this page