JavaScript

Mockyard — Free 3D Device Mockup Generator

A free, browser-based tool that puts your design on a 3D laptop, phone, tablet or monitor. Orbit the camera, tune light and shadow, then save a PNG or WebP (with a transparent background if you want) or record an MP4 or WebM animation. Built with Three.js, and everything runs client-side.

Visit project View repository

Mockyard 3D mockup of an orange iPhone showing a website design on its screen

Overview

Mockyard is a web tool for turning a flat screen design into a shareable 3D device mockup. You pick a device, drop your design onto its screen, set the camera angle, light and background, and save the result as an image or a short animation. It is free, needs no account, and runs entirely in the browser, so designs are never uploaded.

Key features

Devices in one click (iPhone 17 Pro, MacBook Pro, iPad Pro) or your own .glb, .fbx, .dae and .obj models, with your design fitted to the screen by fill, fit or stretch.
Camera control (orbit, pan, zoom, angle presets, focal length) and canvas ratios 1:1, 4:5, 9:16 and 16:9.
Light and shadow with built-in and custom HDR environments, a flat plane or adjustable table under the device, 10 look presets, and a transparent background option.
PNG or WebP export up to 3072 px, plus animations (turntable, zoom, swing, orbit, open the laptop) recorded as MP4 or WebM, in an Indonesian and English interface.

Mockyard 3D render of the back of an orange iPhone on a dark background — The same device from behind, with a dark background and a different camera angle.

How it is built

A static app with plain HTML, CSS and JavaScript, and Three.js (r128) with its loaders for the 3D scene. There is no framework, bundler or backend. Devices live in a folder of 3D models, and a small Python script reads the mesh and material names in each model and writes a config file, so adding a device means dropping in a file and running one command. The app finds the display mesh by name (Screen, Display, LCD) and reads the UV layout so the picture always lands upright. Because rendering happens in the browser, user designs stay on the user's machine.

What this project demonstrates

Real-time 3D rendering paired with a practical designer workflow: loading models in several formats, lighting and shadows that look good by default, and in-browser export of images and video. It is open source under the MIT license, and a sibling to Flatlay Mockup, built for a need that kept coming up in client design work.