Changing it
Mockup controls
The studio is one scene, not two hundred, so its controls are declared once — as 6 titled groups holding 22 controls, in three3d/mockupControls.ts. Every panel below is read from that file: real ranges, real defaults, live.
This is the studio side. The motion side — declared per template, one panel per family — is Library controls.
How this differs from a template’s panel
| Library | Mockup | |
|---|---|---|
| Declared by | each template, in its own file | the studio, in one schema file |
| Shape | a flat list; section on each entry groups the panel | titled groups, each holding its own list |
| Scope | only that motion — hundreds of families, hundreds of panels | one panel for the whole studio |
| Reset | picking a template wipes and refills from the declaration | persistent; it is the studio’s state, not a motion’s |
What the two share is the vocabulary and the renderer: the same nine types and the same row component, so a control looks and behaves identically in either place. Notice what the studio actually uses — almost all sliders, a few toggles, two colours. A 3D studio does not need a wider vocabulary than a 2D motion does, and it did not get one.
The studio’s panels
The lens, and the one part of the device that moves.
Field of View is the lens, not the camera position. Widening it fits more in the frame but also bends the device — a wide angle exaggerates the perspective on its edges, a narrow one flattens the whole thing toward an elevation drawing. If you want the device bigger without that distortion, move the camera instead, which is what the animation presets do.
Laptop Lid only applies to the laptop slot, and it is the one piece of the hardware itself that animates: the presets keyframe it open or shut along the same pose timeline that carries the camera.
Overrides on top of the model’s own materials.
The device arrives with real materials of its own, and Use Model Materials keeps them. Everything below it is an override for when you deliberately turn that off — a tint, a glow, transparency, or the two diagnostic looks.
Emissive is not lighting: it makes the body emit rather than reflect, so it stays bright no matter where the key light is. Wireframe and Flat Shading are there to inspect the mesh and the shading, not to ship a product shot.
How the panel emits, and how much room it mirrors.
Brightness scales the screen’s own emission, so your artwork can hold up against a bright studio without being washed out by it.
Glare defaults to zero on purpose. The studio environment has rectangular panels baked into it, and a mirror-smooth display returns one as a hard softbox — the single clearest tell that an image was rendered rather than photographed. Raise it when a glossy screen is the look you want, not as a default.
The studio rig: direction, balance, reflection, exposure.
Light Direction X and Y are the two axes of a direction pad, and they are applied as an OFFSET on top of whatever the active animation preset is doing with the key light. So a preset can swing the light through a shot and your offset still means the same thing relative to it.
Key, Fill and Ambient are the balance. A strong key against a low fill and ambient floor is what actually reads as sharp — enough contrast that the device’s edges and its finish stay defined instead of washing into a bright backdrop. Raising all three together just flattens the shot.
Reflections is how much of the room the surfaces return. Exposure is the render’s own exposure, and it is the control on this page that changes the render itself rather than grading it afterwards.
Post-grade on the rendered device, not lighting.
These are filters applied to the canvas after the device is rendered, and they touch the device only — the backdrop keeps its own colours.
Which means: if the device looks too dark, Exposure up in Lights is the honest fix. Brightness here will lift it, and it will lift the noise and flatten the blacks with it. Use these for finishing, the way you would grade a photo.
The contact shadow under the device.
Zero by default, because the default shot has no contact shadow at all: the device floats on a plain backdrop. Raising this introduces a ground plane for the device to sit on and cast onto.
Worth knowing before you reach for it: a shadow needs a floor, and a floor is a real plane in the scene. On a pose that floats or tilts far, that plane can end up crossing the device rather than sitting under it — if you see a straight dark edge that does not follow the device’s shape, that is the ground, not the shadow.
Three rotations in one widget.
Drag inside the disc for X and Y, drag the outer ring for Z, and type the fields for the degrees a drag cannot land on. It replaced an XY pad, which could only ever reach two of the three axes.
Degrees here, radians in the store, converted at the boundary — because degrees are what you read and type, and radians are what the scene does maths with.
Two rules that cover all of them
- The groups are declared, not derived. A motion control carries a
sectionand the panel groups by it; a studio panel carries a title and holds its own controls. Adding a panel here means adding an object to the schema, not inventing a section name somewhere. - Nothing resets. These values belong to the studio, so they survive switching device, finish and animation preset. Motion values are wiped on every template pick, by design — which is the sharpest difference between the two sides.
The one control that is not on this page
The view gizmo: six axis balls showing how the camera sits relative to the world, drag to orbit, double-click a ball to snap to that axis. Like the trackball above it refused the nine-type vocabulary for the same reason — it is spatial, and a list of words would make you translate language back into geometry.
It is not mounted here because it needs a real camera rig to point at; it lives over the 3D stage in the editor. Its axis colours are the one place in the app that uses hue deliberately, following the red/green/blue convention for X/Y/Z — see Design and theming.