Create and animate 3D mockups in Crayon

Create 3D mockups in Crayon. Build custom shapes or import a GLB, add screen artwork, adjust angles and materials, and animate your mockup with timeline keyframes.

How to use the 3D Mockup Wizard

  1. Open the 3D Mockup Wizard In the editor, open Elements, choose 3D Mockup, then select Create 3D Mockup. You can also select an existing 3D mockup on the canvas and choose Open in 3D Mockup Wizard.
  2. Choose how to build the model In Model & Shapes, choose Device Library for a ready-made object, Dimensions for a parametric model, Build Shapes for an assembly of editable parts, or Import GLB for your own .glb or .gltf model.
  3. Add your artwork and adjust the view Choose the screen or label surface, upload artwork in the Artwork tab, then use Finish for colors and materials. Drag the preview or use Angles to set the camera-facing pose.
  4. Animate and place it on the canvas Use Motion for a preset animation, preview it, then choose Add to Canvas. Save to Library if you want to reuse the mockup in another design.

Create your own 3D mockup

Build Shapes

Start from a blueprint or add boxes, cylinders, spheres, capsules, toruses, cones, and screen surfaces. Select a part in the list or preview to adjust its size, position, rotation, color, metalness, and roughness.

Import a GLB

Import a .glb or .gltf model to keep its original geometry and materials. Choose the mesh that should receive a new screen image or label. You can then add the model to the canvas or convert its meshes into editable Build Shapes parts.

Use the device library

Pick a ready-made device or product mockup when you want to focus on the artwork and camera angle rather than building the object from parts.

Animate a 3D mockup with keyframes

  1. Add the 3D mockup to the canvas and select it.
  2. Open the timeline, move the playhead to the time where the movement should begin, and choose the object in Properties.
  3. Use a diamond beside a position, rotation, or scale control to add a keyframe. Move the playhead and change that control to set another keyframe.
  4. Play the timeline to preview the movement, then adjust the keyframes or use a Motion preset in the wizard for a quick starting animation.

Frequently asked questions

How do I make a 3D mockup in Crayon?

Open Elements in the editor, choose 3D Mockup, and select Create 3D Mockup. The wizard lets you use a device, build shapes, set artwork, adjust angles, and add the result to the canvas.

Can I import my own 3D model?

Yes. Use Import GLB in the 3D Mockup Wizard to load a .glb or .gltf model. Choose the mesh for your screen image or label before adding the mockup to the canvas.

How do I animate a 3D mockup with keyframes?

Add the mockup to the canvas, select it, open the timeline, and move the playhead. Choose an object in Properties, then use the diamond next to a position, rotation, or scale control to set keyframes at different times.

Can I edit a 3D mockup after adding it to the canvas?

Yes. Select its layer and choose Open in 3D Mockup Wizard in Properties. You can change the model, artwork, finish, angles, and motion, then update the layer.

  • Open editor
  • Video maker
  • Features
  • Design studio