PanTilt

Lets the user look around with the mouse or touch.

Free look-around. pan turns the camera left and right, tilt up and down, both in degrees. Each one is an InputAxis, so it can be driven by the mouse and touch through an input controller, or from code, for example in a cutscene.

To start facing a specific direction, pass a quaternion to the camera's initialState.

Settings

Setting	Description	Default
`target`	Makes `pan` and `tilt` relative to this target's rotation, for example a vehicle's cockpit. Omit for world space.
`pan`, `tilt`	Settings for each axis, like `range`, `wrap`, `damping` or `recentering`. Later on, change them on `aim.pan` and `aim.tilt`.	see Axes
`autoNormalize`	React only. Keep `pan` inside its range after each drag while it wraps. `autoNormalize` on the axis elsewhere.	`false`

Axes

Axis	Range	Center	Wraps
`pan`	`[-180, 180]`	`0`, facing forward	yes
`tilt`	`[-90, 90]`	`0`, level	no

Every axis starts at its center.

Usage

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

const aim = new PanTiltAim(null, { tilt: { range: [-60, 60] } });
camera.aim = aim;

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

Pass a target to make pan and tilt relative to its rotation: new PanTiltAim(vehicle).

From code

aim.pan.applyDelta(5); // turn right by 5°
aim.pan.setValue(0);   // face forward at once
aim.tilt.value;        // current tilt

More in Input from data.

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

const aim = new PanTiltAimThree(null, { tilt: { range: [-60, 60] } });
camera.aim = aim;

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

Pass a target to make pan and tilt relative to its rotation: new PanTiltAimThree(vehicle).

From code

aim.pan.applyDelta(5); // turn right by 5°
aim.pan.setValue(0);   // face forward at once
aim.tilt.value;        // current tilt

More in Input from data.

Add an <InputController> inside it to drive it with the mouse or touch:

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

<VirtualCamera name="first-person" priority={10}>
  <Body.HardLockToTarget target={headRef} />
  <Aim.PanTilt tilt={{ range: [-60, 60] }}>
    <InputController
      mouseButtons={{ left: { axes: { x: 'pan', y: 'tilt' }, gain: 0.15 } }}
      touches={{ one: { axes: { x: 'pan', y: 'tilt' }, gain: 0.15 } }}
    />
  </Aim.PanTilt>
</VirtualCamera>

ref gives you the PanTiltAimThree.

From code

const aim = useRef<PanTiltAimThree>(null);

aim.current.pan.applyDelta(5); // turn right by 5°
aim.current.pan.setValue(0);   // face forward at once
aim.current.tilt.value;        // current tilt