Input

Mouse, touch, wheel and pinch input for cameras, or your own data.

Some pieces can be controlled by the user, like PanTilt or OrbitFollow. They expose axes (pan and tilt, or horizontal, vertical and radial), and an input controller maps mouse and touch drags, the wheel and pinches onto those axes.

Each axis is an InputAxis, a value with limits, wrapping, damping and optional recentering. You can also drive an axis from your own code, for example in a cutscene, see Input from data.

Usage

InputControllerDom from @pmndrs/klipp/dom reads the mouse, touch and wheel, and takes the axes themselves:

import { InputControllerDom } from '@pmndrs/klipp/dom';

const look = { axes: { x: aim.pan, y: aim.tilt } };
const controller = new InputControllerDom({
  mouseButtons: { right: look },
  touches: { one: look },
});
klipp.whileOnScreen(camera, () => {
  controller.connect(canvas);
  return () => controller.disconnect();
});
klipp.registerUpdate(() => controller.update()); // reads input before the cameras run

Without a DOM, feed the axes from any source, see Input from data.

InputControllerDom from @pmndrs/klipp/dom reads the mouse, touch and wheel, and takes the axes themselves:

import { InputControllerDom } from '@pmndrs/klipp/dom';

const look = { axes: { x: aim.pan, y: aim.tilt } };
const controller = new InputControllerDom({
  mouseButtons: { right: look },
  touches: { one: look },
});
klipp.whileOnScreen(camera, () => {
  controller.connect(renderer.domElement);
  return () => controller.disconnect();
});
klipp.registerUpdate(() => controller.update()); // reads input before the cameras run

An <InputController> placed inside the piece finds its axes by name:

import { Aim, InputController } from '@pmndrs/klipp/react';

<VirtualCamera name="look-around" priority={10}>
  <Aim.PanTilt>
    <InputController
      mouseButtons={{ right: { axes: { x: 'pan', y: 'tilt' } } }}
      touches={{ one: { axes: { x: 'pan', y: 'tilt' } } }}
    />
  </Aim.PanTilt>
</VirtualCamera>

Edit this page