Debugging
Framing zones
PositionComposer, RotationComposer and GroupFraming can draw their zones on top of the canvas.
Each element has a CSS class you can restyle: klipp-debug-deadzone, klipp-debug-hardlimit, klipp-debug-groupframing and klipp-debug-crosshair.
.klipp-debug-deadzone {
border-color: lime;
}
Camera frustums
A frustum helper draws a camera in the scene, so you can see where an inactive camera is and what it's looking at. Every camera's state holds what it needs: position, quaternion, fov or orthographicSize, near and far. Off screen, a camera updates only now and then by default, so its frustum moves in steps. Give it standbyUpdate: 'always' to see it move smoothly.
Orbits
An orbit helper draws where an OrbitFollow camera can move, around the point it tracks: the circle horizontal moves it along in orange, the arc vertical moves it along in blue, and the three rings of 'threeRing' in gray.
Usage
Framing zones
Draw them with DebugOverlay from @pmndrs/klipp/dom:
import { debugZones } from '@pmndrs/klipp';
import { DebugOverlay } from '@pmndrs/klipp/dom';
const overlay = new DebugOverlay();
overlay.connect(canvas.parentElement!);
overlay.render(debugZones.composer(body.screenPosition, body.deadZone, body.hardLimit), body.screenPosition);
debugZones.composer turns a composer's settings into the same boxes the React components draw. Call render again whenever the zones change, and disconnect() to remove the overlay. For group framing, debugZones.groupFramingPaddingBox gives the size of the padding boundary.
Orbits
orbitFollow.point(out, body.state, body, horizontal, vertical) gives where the camera would be at any axis values, to draw with your own renderer.
Framing zones
Draw them with DebugOverlay from @pmndrs/klipp/dom:
import { debugZones } from '@pmndrs/klipp';
import { DebugOverlay } from '@pmndrs/klipp/dom';
const overlay = new DebugOverlay();
overlay.connect(renderer.domElement.parentElement!);
overlay.render(debugZones.composer(body.screenPosition, body.deadZone, body.hardLimit), body.screenPosition);
debugZones.composer turns a composer's settings into the same boxes the React components draw. Call render again whenever the zones change, and disconnect() to remove the overlay. For group framing, debugZones.groupFramingPaddingBox gives the size of the padding boundary.
Camera frustums
CameraFrustumHelperThree is a CameraHelper that follows a virtual camera's state. Its maxDistance sets how far the frustum is drawn, 1 by default. Pass klipp.orthographic as the third argument of sync to draw a box for an orthographic camera:
import { CameraFrustumHelperThree } from '@pmndrs/klipp/three';
const helper = new CameraFrustumHelperThree();
scene.add(helper);
// every frame, after klipp.update
helper.sync(securityCam.state, innerWidth / innerHeight, klipp.orthographic);
Orbits
import { OrbitFollowHelperThree } from '@pmndrs/klipp/three';
const helper = new OrbitFollowHelperThree();
scene.add(helper);
// every frame, after klipp.update
helper.sync(body);
helper.colors holds the horizontal, vertical and rings colors.
Framing zones
Add the debug prop. The zones show while their camera is the winner:
<Body.PositionComposer target={playerRef} deadZone={[0.4, 0.4]} hardLimit={[0.7, 0.7]} debug />
Camera frustums
Place <CameraFrustumHelper> inside the <VirtualCamera> you want to see:
import { CameraFrustumHelper } from '@pmndrs/klipp/react';
<VirtualCamera name="security-cam" priority={5}>
<Body.HardLockToTarget target={[5, 4, 5]} />
<Aim.HardLookAt target={doorRef} />
<CameraFrustumHelper color="orange" />
</VirtualCamera>
ref gives you the CameraFrustumHelperThree.
Orbits
Add the debug prop:
<Body.OrbitFollow target={playerRef} debug />