---
contentHash: sha256:cb76cd60ad4b4658e5776fc5276e6bedbbff09c0af4062aff80eddaf7daca772
documentId: guide:for-agents-example-camera-fit
kind: guide
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# Camera framing with auto-fit

<a id="overview"></a>

## Overview

The canonical camera setup: a scene-root <sk-camera-orbit-control fit-targets="auto"> frames the whole composition, azimuth/elevation pose the framed view, fit-margin adds breathing room, and the perspective camera's focal length sets the perspective feel.

Demonstrates: auto-fit orbit control, azimuth/elevation pose, focal length.

<a id="scene"></a>

## Scene

```sk
<sk-scene style="width: 100%; height: 420px;">
    <!-- The canonical camera setup: auto-fit frames everything, then
         azimuth/elevation pose the framed view and fit-margin adds breathing
         room. The perspective camera's focal length sets the perspective feel. -->
    <sk-camera-orbit-control fit-targets="auto" fit-margin="0.25"
        azimuth="42deg" elevation="30deg" orient-toward-pivot></sk-camera-orbit-control>
    <sk-perspective-camera focal-length="24"></sk-perspective-camera>
    <sk-directional-light intensity="1" p="70deg" h="30deg"></sk-directional-light>

    <sk-plain-material id="ground-mat" base-color="#3a3a3a"></sk-plain-material>
    <sk-plain-material id="warm-mat" base-color="#d8a24a"></sk-plain-material>
    <sk-plain-material id="cool-mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="accent-mat" base-color="#c05a4e"></sk-plain-material>

    <sk-plane y="-0.9" width="14" height="14" orientation="+y" cull-mode="none">
        <sk-surface-paint material="#ground-mat"></sk-surface-paint>
    </sk-plane>

    <sk-capsule x="-2.6" radius="0.55" height="1.6" rotation-segments="32">
        <sk-surface-paint material="#cool-mat"></sk-surface-paint>
    </sk-capsule>

    <sk-sphere radius="0.9">
        <sk-surface-paint material="#warm-mat"></sk-surface-paint>
    </sk-sphere>

    <sk-cylinder x="2.6" radius="0.6" height="1.4" rotation-segments="32">
        <sk-surface-paint material="#accent-mat"></sk-surface-paint>
    </sk-cylinder>
</sk-scene>
```

---

Related records: [`element:sk-camera-orbit-control`](elements/sk-camera-orbit-control.md), [`element:sk-capsule`](elements/sk-capsule.md), [`element:sk-cylinder`](elements/sk-cylinder.md), [`element:sk-directional-light`](elements/sk-directional-light.md), [`element:sk-perspective-camera`](elements/sk-perspective-camera.md), [`element:sk-plain-material`](elements/sk-plain-material.md), [`element:sk-plane`](elements/sk-plane.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-sphere`](elements/sk-sphere.md), [`element:sk-surface-paint`](elements/sk-surface-paint.md), [`guide:for-agents`](guides/for-agents.md)