A camera toolkit for the web, inspired by Unity Cinemachine. Describe the shots you want, and Klipp picks the right one and blends between them.
The core runs anywhere, with no renderer or framework attached. Integrations are thin layers on top: three.js and React Three Fiber today, with more to come, like TresJS.
npm install @pmndrs/klipp
import { Klipp, FollowBody, HardLookAtAim, VirtualCamera, targetPose } from '@pmndrs/klipp'; const klipp = new Klipp(); const player = targetPose.create(); // keep player.position up to date const follow = new VirtualCamera('follow', { priority: 10 }); klipp.add(follow); follow.body = new FollowBody(player, { offset: [0, 3, 8], damping: 0.5 }); follow.aim = new HardLookAtAim(player); // every frame klipp.update(dt); engineCamera.setPosition(klipp.shot.position); engineCamera.setRotation(klipp.shot.quaternion);
import { Klipp, VirtualCamera, Body, Aim } from '@pmndrs/klipp/react'; <Klipp> <VirtualCamera name="follow" priority={10}> <Body.Follow target={playerRef} offset={[0, 3, 8]} damping={0.5} /> <Aim.HardLookAt target={playerRef} /> </VirtualCamera> <VirtualCamera name="cutscene" priority={20} active={isCutscene}> <Body.HardLockToTarget target={[10, 2, 0]} /> <Aim.HardLookAt target={playerRef} /> </VirtualCamera> </Klipp>;
- Virtual cameras with priorities, and blending between them.
- KlippControls: orbit, pan and zoom with the mouse or touch, in perspective and orthographic views.
- Groups: play shots in a sequence, or mix several cameras by weight.
- Body and Aim: follow, frame or look at targets, or let the user orbit and look around.
- Extension: lens, group framing, camera offset, follow zoom, confiner and recomposer.
- Noise and Impulse: camera shake.
- Perspective and orthographic cameras.
- Debugging: framing zones and camera frustums.
| Entry point | For |
|---|---|
@pmndrs/klipp |
The core, built on math. |
@pmndrs/klipp/three |
three.js classes, ending in Three. |
@pmndrs/klipp/react |
React Three Fiber components. |
@pmndrs/klipp/dom |
Mouse, touch and wheel input and debug overlays. |