Live Mockups · Camera · 1 min read

Frame the shot with Camera

Use Zoom, Lens and Distance in the Camera section of Live Mockups to frame a 3D device closer or wider, then reset with one button.

To frame a shot in Live Mockups on ls.graphics, scroll the right panel to Camera and drag Zoom to crop in, Lens to change the perspective and Distance to move the camera back, then click Reset transformations to return to the scene’s own framing.

Editor: Live Mockups at ls.graphics/live-mockup-editor. Result: the iPhone Air scene framed closer, wider and then reset. In our test Zoom went from 30 to 83 and Distance from 1 to 2.42.

Find the Camera section

Open a scene (see Start with a 3D scene) and scroll the right panel down to Camera, below Effects and Post processing. It holds three sliders, Zoom, Lens and Distance, and a Reset transformations button.

The Camera section with Zoom, Lens, Distance sliders beside the iPhone on the canvasThe Camera section with Zoom, Lens, Distance sliders beside the iPhone on the canvas
Camera sits below Effects and Post processing.

Drag Zoom

Drag the Zoom slider to the right. The device grows and the frame crops in on it. In our test, Zoom went from 30 to 83.

The iPhone enlarged on the canvas after Zoom moved to the rightThe iPhone enlarged on the canvas after Zoom moved to the right
Zoom crops in on the device.

Drag Lens

Drag the Lens slider. The device stays about the same size while the perspective around it changes.

The iPhone with a different perspective after the Lens slider movedThe iPhone with a different perspective after the Lens slider moved
Lens changes the perspective.

Drag Distance

Drag the Distance slider to the right to move the camera back. The device gets smaller and more of the scene comes into view. In our test, Distance went from 1 to 2.42.

The iPhone small on the canvas with the whole stand visible after Distance movedThe iPhone small on the canvas with the whole stand visible after Distance moved
Distance moves the camera back.

Click Reset transformations

Click Reset transformations to start over. It clears your Zoom, Lens and Distance changes and any turning you did with the mouse.

The Camera section with Lens and Distance moved and the phone small on the canvasThe Camera section with Lens and Distance moved and the phone small on the canvas
Before: Lens and Distance changed.
The Camera section after Reset transformations with the phone back at a larger sizeThe Camera section after Reset transformations with the phone back at a larger size
After: the camera is back to its own framing.

Questions

What is the difference between Zoom and Lens in Live Mockups?

In Live Mockups, Zoom crops the frame in on the device and leaves the perspective alone. Lens changes the perspective while the device stays about the same size on the canvas.

How do I show more of the scene around the device?

Drag Distance in the Camera section to the right. The camera moves back, so the device gets smaller and more of the surroundings, such as the stand in the iPhone Air scene, come into view.

Why does the framing differ slightly after Reset transformations?

In our test on the iPhone Air scene, Zoom read 30 when the scene loaded and 26 after Reset transformations, so the phone looked slightly larger than it did at load.

Does Reset transformations also undo turning the model with the mouse?

Yes. In our test we turned the MacBook Pro scene with a drag, and Reset transformations brought its pose back close to where it started.

Try it in the Live Mockups

Real 3D devices you turn, light and animate.

Open editor