Command Palette

Search for a command to run...

Hectal

Phase 7 · part: Rear wheel

Cameras and Controls

Perspective and orthographic cameras, near, far and the depth buffer, OrbitControls with limits, framing any object, smooth camera moves. Then the showroom gets its rear wheel and three views.

Every picture in 3D is taken by a camera, and most 3D bugs are really camera bugs: nothing on screen, a stretched bike, shapes that flicker, a view that ends up under the floor. This phase takes the camera apart. You learn what a field of view and an aspect ratio change, when an orthographic camera is the right one, and what near and far do to the depth buffer.

Then the user takes the controls. You set up OrbitControls with limits, learn why a canvas can swallow a phone's scrolling, work out how far away the camera must be to fit any object from its field of view, and move the camera smoothly between views without cutting through the bike, while respecting reduced motion.

At the end the showroom has orbit controls with sensible limits, three preset views (side, front, rear wheel) on keyboard-friendly buttons, and the bike's rear wheel.

Phase 7 · the brief from Lumen

Lena, QA at Lumen Bikes

“On my phone I swiped to scroll the page and the bike spun instead. Then I zoomed in and the bike disappeared.”

The showroom page now holds more than the canvas: a price, a short text, a button. Lena tested it on her cheap Android phone and sent two screen recordings. In the first, she tries to scroll down and the bike spins. In the second, she pinches to zoom and the screen goes empty. She had gone through the bike and out the other side.

Ama has a third request: "People ask what the back wheel looks like. One tap should take them there." Kofi realises that the camera is the whole product here. It must stay above the floor, never get inside the bike, fit the bike on a wide laptop and a tall phone, and move between views without making anyone dizzy.

In this phase the team learns how the camera really works, from field of view to depth buffer, tames the controls, and adds three preset views. The bike gets its rear wheel, so there is something worth flying to.

At this station

You will learn

  • Choose a perspective or an orthographic camera, and set its field of view, aspect, near and far on purpose
  • Use OrbitControls with limits, damping and a target, and keep a phone page scrollable
  • Frame any object: work out the camera distance from the field of view
  • Move the camera smoothly between views, and stop when the user grabs the controls

You write code in

In your lumen-3d project (npm run dev) and in the editor on this page

Files you touch

  • index.html
  • src/main.js
  • src/world/camera.js
  • src/systems/controls.js
  • src/objects/bike.js
Start with 7.1

Work order · 6 steps

  1. 7.1Perspective and Orthographic CamerasA camera sees a shape in space, its frustum. A perspective camera sees a pyramid, so far things look small; an orthographic camera sees a box, so size never changes with distance. Field of view acts as the zoom, and the aspect must follow the window. 21 min 2 live scenes
  2. 7.2Near, Far and the Depth BufferThe GPU decides what is in front with a depth buffer: one number per pixel. Those numbers are bunched up near the camera, so a tiny near and a huge far make surfaces flicker (z-fighting), and a wrong near or far makes objects vanish. 21 min 2 live scenes
  3. 7.3OrbitControlsOrbitControls lets a visitor orbit, zoom and (optionally) pan the camera around a target with mouse, touch or wheel. Left alone it lets the camera go under the floor and through the bike, and it takes over touch scrolling, so you set limits and know what it claims. 20 min 2 live scenes
  4. 7.4Framing an ObjectTo 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. 22 min 2 live scenes
  5. 7.5Camera AnimationTo move the camera between views, turn progress into a position: lerp the target, slerp the camera's direction and lerp its distance, shaped by an easing curve and measured in seconds. Stop when the user grabs the controls, and jump instead of flying when reduced motion is on. 26 min 3 live scenes
  6. 7.6Build: Camera ViewsbuildThe showroom gets orbit controls with limits, three preset views (side, front, rear wheel) on buttons that work with a keyboard, a camera that refits when the screen changes shape, and the bike's rear wheel. 30 min 1 live scene

Quality control · 3 tests

Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.

QC-01Fix the stretched pictureThe camera was made for a square window, but the canvas is twice as wide as it is tall, so the bike looks stretched.IntermediateQC-02Put limits on the orbitThe controls can go under the floor, through the bike and far away, and they orbit a point on the floor.IntermediateQC-03Frame the bike from the field of viewThe camera is far too close: the bike fills more than the picture. Move the camera back along +z so the whole bike fits, using the formula from Topic 7.4 with a margin.Intermediate