Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 7.4 — Framing an Object
3D Web · Example 1 of 2

How far away for each object and screen

No canvas here, only the maths and a check: the projected corners prove the fit. Face on means looking straight at the long side.

To fit an object in the picture, compute the camera distance from the field of view: d = (size / 2) / tan(fov / 2), using whichever of height and width is tighter. Then set near, far and the controls' limits from the same size, and do it again when the window changes shape.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 3 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

A shelf 2.4 m wide and 0.4 m tall is seen by a camera with fov 40° and aspect 2. How far must the camera be, with no margin?

02

Write the guard at the top of frameObject that stops it from framing an empty object, in one if.

Explain it without notes

01

Derive the distance at which an object h tall just fits, for a camera with vertical field of view fov.

02

Why does the same bike need a different camera distance on a phone held upright?

How far away for each object and screen
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

bike, 16:9 screen       from any side 2.51 m | face on 1.25 m fills x 0.76 y 0.87 | near 0.1 is fine, far 100 is fine
bike, phone upright     from any side 4.98 m | face on 4.10 m fills x 0.87 y 0.26 | near 0.1 is fine, far 100 is fine
bike, ultra-wide 3.5:1  from any side 2.51 m | face on 1.25 m fills x 0.39 y 0.87 | near 0.1 is fine, far 100 is fine
a 2 cm screw            from any side 0.0319 m | face on 0.0156 m fills x 0.87 y 0.39 | near must go below 0.1, far 100 is fine
a 400 m tall tower      from any side 614 m | face on 555 m fills x 0.07 y 0.87 | near 0.1 is fine, far must go above 100