# 5.6 Camera (2)

> Contract 2.0.0 · package sha256 `a857eca95b35921109faf997094bb4192f12527d9d0fcd4be7e97f06425bad6e` · generated from `examples/section-5/5.06-camera-2.ts` by `services/onsite-scripter/scripts/build-contract-docs.mjs`; edit the source, not this file.

Imports: values (`has`, `validate`, the `Holo*Error` classes, the pure helpers) from `@holostep-configurators/runtime-client`, types from `@holostep-configurators/runtime-client/contract`, `/math` and `/testing` names from those entries; `boot` from the runtime module the root's `loadRuntimeAtFloor` resolves to. A type your page defines is your app's: declare it there, never import it from the package.

```ts
import type { Session } from '@holostep-configurators/runtime-client/contract';
declare const session: Session;
declare const signal: AbortSignal;
declare function addButton(label: string, run: () => void): void;   // your <button> beside the view, never inside `el`
declare function setStatus(text: string): void;                      // your role="status" region's text
declare function describeChoice(group: string, material: string): string; // your catalogue's words
const turn = (byAzimuthDeg: number, byPolarDeg: number) => (): void => {
  const { target, azimuthDeg, polarDeg, distance } = session.camera.state;
  void session.camera.set(
    { target, azimuthDeg: azimuthDeg + byAzimuthDeg, polarDeg: polarDeg + byPolarDeg, distance },
    { durationMs: 300 },
  );
};
addButton('Turn left', turn(-22.5, 0));
addButton('Turn right', turn(22.5, 0));
addButton('View from higher', turn(0, -15));                         // polarDeg 0 looks straight down
addButton('View from lower', turn(0, 15));
addButton('Reset view', () => void session.camera.fit(undefined, { durationMs: 300 }));
// one sentence per pick, once it is shown: never per frame or per write
session.on('material:selected', ({ group, material }) => setStatus(describeChoice(group, material)), { signal });
```

Back to [the examples](README.md) · [llms.txt](../llms.txt)