---
title: "3D Product Showcase Maker"
description: "Create a 3D product showcase in your browser: add camera-facing billboards to a 3D model, choose a camera path, and render real-time or path-traced video. No upload."
toolId: "product-showcase"
category: "editing"
subgroup: "product-showcase"
subgroupName: "Product Showcase"
url: "https://any3d.cc/en-US/tools/product-showcase"
markdown: "https://any3d.cc/llm/tools/product-showcase.md"
---

# 3D Product Showcase Maker

Place camera-facing billboards with custom background and text on your 3D model, choose a camera trajectory, and render a product showcase video entirely in your browser. Supports real-time recording and high-quality path-traced rendering, with no file upload.

**Category:** 3D Model Editing Tools (`editing`)
**Subgroup:** Product Showcase (`product-showcase`)

**HTML:** https://any3d.cc/en-US/tools/product-showcase

> Runs entirely in the browser. Files are not uploaded to Any3D servers.

## Overview

Upload a 3D model, design a billboard with a solid color, gradient or image plus custom text, click the model surface to snap it in place, then pick a camera trajectory preset and render your product showcase. The billboard automatically stays aligned with the camera as it moves, so labels and callouts remain readable from every angle. Use real-time mode for quick video capture, or switch to path-traced mode for more realistic lighting and shadow detail. Rendering runs locally in your browser, so your files never leave your device.

## How to Use

1. **Load your model:** Drop in a GLB, glTF, FBX, OBJ or another common 3D file. It opens <strong>only in your browser</strong>.
   - Models with real textures look best in High Quality.
2. **Design the billboard:** Choose a <strong>Background</strong> of colour, gradient or image, then type your label and set <strong>Font size</strong> and colour.
   - Short labels of two to five words stay readable while the camera moves.
3. **Click to anchor it:** Click the spot on the model the label should point to. The billboard <strong>always turns to face the camera</strong>, and <strong>Leader layout</strong> sets how the line runs to it.
   - Pick a spot that stays visible for most of the camera path.
4. **Choose the camera move:** Pick a <strong>Preset</strong> such as Orbit or Arc, then set <strong>Duration</strong>. Turn on Show path to see the route.
   - Orbit gives the classic turntable look for store listings.
5. **Render and export:** Use <strong>Standard</strong> for a quick draft, or <strong>High Quality</strong> for realistic light and shadows, then export MP4 or WebM.
   - Set Aspect ratio to 9:16 for vertical social videos.

## About Configuration Options

### Billboard

- **Background** (Default: Color): Choose how the billboard background is filled: solid color, linear gradient, or an uploaded image.
  - `color` — Color: A single solid fill color behind the text.
  - `gradient` — Gradient: Two-color linear gradient with adjustable angle.
  - `image` — Image: Use an uploaded image (PNG/JPG/WebP) as the billboard background.
- **Background color** (Default: #135BEC): Fill color when background type is solid color.
- **Gradient start** (Default: #135BEC): Start color of the linear gradient.
- **Gradient end** (Default: #ffffff): End color of the linear gradient.
- **Gradient angle** (Default: 0°; Range: 0° – 360° · step 5°): Direction of the linear gradient in degrees (0-360).
- **Opacity** (Default: 1; Range: 0.1 – 1 · step 0.05): Overall transparency of the billboard background (0.1-1).
- **Padding** (Default: 28px; Range: 0px – 64px · step 2px): Inner spacing between the text/content and the billboard edge.
- **Corner radius** (Default: 16px; Range: 0px – 64px · step 2px): Roundness of the billboard corners.
- **Font** (Default: system_sans): Typeface used for billboard text. Built-in commercial-free fonts, uploaded files, and local system fonts are supported.
  - `system_sans` — system_sans
  - `system_serif` — system_serif
  - `system_mono` — system_mono
  - `oswald_bold` — Oswald (Display Bold): Condensed display sans, strong for titles and product labels.
  - `inter_bold` — Inter (Modern Sans): Neutral modern sans for body text and UI-like labels.
  - `cinzel_bold` — Cinzel (Classic Serif): Classic serif for premium or heritage product labels.
  - `robotomono_regular` — Roboto Mono (Engineering): Monospace for dimensions, SKUs, and technical callouts.
  - `notosans_sc` — Noto Sans SC (CJK): Sans covering Simplified Chinese, Japanese, and Korean.
  - `notosans_arabic` — Noto Sans Arabic: Sans covering Arabic script.
- **Font size** (Default: 56px; Range: 24px – 120px · step 2px): Text size in the panel design space. Changes how large text appears within the card, not world scale.
- **Text color** (Default: #ffffff): Color of the label text on the billboard.
- **Horizontal alignment** (Default: Center): Horizontal text alignment within the billboard.
  - `left` — Left: Align text to the left.
  - `center` — Center: Center the text horizontally.
  - `right` — Right: Align text to the right.
- **Font weight** (Default: 600): Thickness of the text (300-800).
  - `300` — 300
  - `400` — 400
  - `500` — 500
  - `600` — 600
  - `700` — 700
  - `800` — 800
- **Size** (Default: 0.28; Range: 0.08 – 0.9 · step 0.01): World-space size of a placed billboard relative to the model (independent of font size).
- **Rotation** (Default: 0°; Range: -180° – 180° · step 5°): In-plane rotation of a selected billboard (degrees).
- **Leader layout** (Default: Up): How the label connects to the surface anchor. Vertical attaches to the bottom edge; horizontal / L-bend attach to the left or right edge center.
  - `vertical` — Up: Go straight up from the anchor; the line meets the bottom-center of the billboard.
  - `l-shape` — L-bend: Go up first, then bend outward (obtuse angle). The line meets the left or right edge center of the billboard.
  - `horizontal` — Side: Extend horizontally outward from the anchor; the line meets the left or right edge center of the billboard.
- **Offset** (Default: 0.25; Range: 0.05 – 0.8 · step 0.01): Leader length as a fraction of the model radius (for Up and Side layouts).
- **Up length** (Default: 0.2; Range: 0.05 – 0.8 · step 0.01): Vertical segment length of an L-bend leader (fraction of model radius).
- **Side length** (Default: 0.25; Range: 0.05 – 0.8 · step 0.01): Outward horizontal segment length for L-bend leaders (fraction of model radius).
- **Direction** (Default: Right): For Side and L-bend layouts: flips the outward direction relative to the model center, and chooses which billboard edge the line attaches to.
  - `left` — Left: Prefer leftward outward direction; the line attaches to the right edge center of the billboard.
  - `right` — Right: Prefer rightward outward direction; the line attaches to the left edge center of the billboard.
- **Line color** (Default: #374151): Color of the leader line and dots.
- **Line width** (Default: 2; Range: 1 – 8 · step 0.5): Thickness of the leader line in pixels.
- **Dashed line** (Default: off): Use a dashed stroke instead of a solid leader line.
- **End dot** (Default: off): Show a small dot at the leader end (off by default). The anchor dot is always shown. Leaders are hidden during export.
- **Vertical alignment** (Default: Middle): Vertical position of the text block within the billboard. Defaults to middle.
  - `top` — Top: Align text to the top.
  - `middle` — Middle: Center text vertically.
  - `bottom` — Bottom: Align text to the bottom.
- **Border width** (Default: 0px; Range: 0px – 24px): Stroke width of the billboard edge in pixels. 0 means no border.
- **Border color** (Default: #ffffff): Color of the billboard border (used when border width is greater than 0).

### Camera Trajectory

- **Preset** (Default: Orbit): Camera path template used for preview and video export.
  - `orbit` — Orbit: Horizontal turntable around the model.
  - `arc` — Arc: Vertical sweep over the model.
  - `dolly` — Dolly Zoom: Push-pull zoom along the view direction.
  - `iso` — Isometric: Isometric rotation at about 45° elevation.
  - `figure8` — Figure-8: Figure-8 path around the model.
- **Show path** (Default: off): Draw the camera trajectory curve in the 3D viewport for preview.
- **Playback** (Default: End after one pass): Whether the trajectory repeats or stops after one full pass. Duration is available only in loop mode.
  - `loop` — Loop: Repeat the trajectory continuously. Set the cycle length with Duration.
  - `once` — End after one pass: Play the full trajectory once, then stop.
- **Duration** (Default: 8): Length of one loop cycle in seconds. Shown only when Playback is Loop.
  - `2` — 2
  - `3` — 3
  - `4` — 4
  - `5` — 5
  - `6` — 6
  - `8` — 8
  - `10` — 10
  - `12` — 12
  - `15` — 15
  - `20` — 20
  - `25` — 25
  - `30` — 30

### Environment & Scene

- **Ground Shadow** (Default: on): Casts soft contact shadows beneath the model to ground the object within the scene.
- **Background Mode** (Default: Physical Sky): Select the environment background style for both the viewport and exported video.
  - `sky` — Physical Sky: Atmospheric scattering sky providing natural outdoor daylight and ambient lighting.
  - `color` — Solid Color: Uniform color backdrop ideal for commercial product presentations and chroma keying.
  - `custom` — Custom Panorama: Loads external panorama or HDR imagery for realistic 360-degree environment reflections.
- **Background Color** (Default: #ffffff): Fill color for solid color background mode with quick presets and hex color picker.
- **Panorama Map**: Upload an external environment map supporting .hdr, .png, and .jpg formats.
- **Light Intensity** (Default: 1x; Range: 0.2x – 3x · step 0.1x): Adjust overall illumination brightness for directional and ambient lights from 0.2x to 3.0x.
- **Light Color** (Default: #ffffff): Configure the lighting tone with daylight, warm, and cool presets or custom color picking.
- **Display Pedestal** (Default: None): Places a display stand beneath the model to elevate it and receive cast shadows.
  - `none` — None: No pedestal is rendered; model sits directly on the ground level.
  - `circle` — Cylinder: Cylindrical pedestal automatically scaled to the model horizontal footprint.
  - `square` — Square: Square pedestal automatically scaled to the model horizontal bounds.
- **Pedestal Color** (Default: #ffffff): Surface material color for the pedestal with pure white, obsidian black, and custom options.

### Render & Export

- **Quality** (Default: Standard): Choose real-time WebGL capture or offline path-traced frames for higher image quality.
  - `webgl` — Standard: Fast real-time capture. Best for drafts and most exports.
  - `pathtrace` — High Quality: Higher image quality with offline path tracing. Much slower per frame.
- **Resolution** (Default: 1080p): Output quality tier (long-edge pixels). Actual width×height = tier × aspect ratio (e.g. 1080p at 16:9 is 1920×1080).
  - `720p` — 720p: Long edge 1280, good for quick drafts.
  - `1080p` — 1080p: Long edge 1920, standard HD (default).
  - `2k` — 2K: Long edge 2560 (QHD tier).
  - `4k` — 4K: Long edge 3840 (UHD tier); slower encode, larger files.
- **Frame rate** (Default: 30): Frames per second of the exported video (24 / 30 / 60).
  - `24` — 24: Cinematic frame rate.
  - `30` — 30: Common web video frame rate.
  - `60` — 60: Smoother motion, larger file.
- **Samples per frame** (Default: 64): Path-tracing samples per frame (16-256). Higher values reduce noise but increase render time. Shown only in High Quality mode. Sampling is tiled and yields the main thread during export.
  - `16` — 16: Fastest preview.
  - `32` — 32: Quick draft.
  - `48` — 48: Medium.
  - `64` — 64: Default balance.
  - `96` — 96: Higher quality.
  - `128` — 128: High samples.
  - `160` — 160: Higher samples.
  - `192` — 192: Very high samples.
  - `224` — 224: Near max.
  - `256` — 256: Maximum samples, slowest.
- **Aspect ratio** (Default: 16:9): Output frame aspect ratio. Combined with resolution tier to set pixel width and height.
  - `16:9` — 16:9: Landscape widescreen.
  - `9:16` — 9:16: Portrait / vertical video.
  - `1:1` — 1:1: Square.
  - `4:3` — 4:3: Classic landscape.
- **Format** (Default: WebM): Video container format. MP4 may fall back to WebM depending on browser support.
  - `webm` — WebM: Widely supported in Chromium browsers.
  - `mp4` — MP4: Prefer H.264 when the browser supports MediaRecorder MP4.

### Quick recipes

- **A quick draft to share with a colleague:** Quality: Standard, Resolution: 720p.
- **A polished hero video for a product page:** Quality: High Quality, 1080p or higher, and more Samples per frame.
- **A vertical clip for social media:** Aspect ratio: 9:16 with the Orbit preset.
- **A product standing on a display:** Turn on Ground Shadow and choose a Display Pedestal shape.

## FAQ

### What is a 3D product showcase video?

A short video that presents a 3D model from multiple angles with labels or billboards overlaid. This tool lets you place camera-facing billboards on the model and move the camera along a preset trajectory to generate it.

### Do the billboards always face the camera?

Yes. Billboard labels automatically rotate to face the camera throughout the animation, so they stay clearly readable from any angle. That makes them great for feature callouts and product annotations.

### How does the billboard snap to the model surface?

When you click on the 3D model, the tool detects the clicked surface point and anchors the billboard there while optimizing the offset distance. This keeps labels clear and helps prevent clipping into the model.

### What is the difference between real-time and path-traced modes?

Real-time mode captures the live preview quickly and exports a video with minimal wait. Path-traced mode renders more realistic materials, lighting, and reflections at higher quality, but takes longer to produce each frame.

### What video format is exported?

You can export MP4 or WebM. MP4 may fall back to WebM depending on your browser's MediaRecorder support. Rendering and export are handled locally in your browser, so no files are uploaded to a server.