Model Viewer Studio - Documentation

Section 01

Export & Publish

A single radio selector at the top of this panel controls which format both the Export button and the Publish to Cloud button will produce. Choose your output type first, then use either button.

Presentation

The full interactive experience. Includes the model carousel, hotspot pins, variation swatches, AR button, branding, and the complete toolbar. This is the default and the most feature-complete output format.

Standalone Presentation

An auto-starting, self-running version. When opened, the timeline begins playing automatically without any user interaction. Useful for kiosk displays, trade shows, or embedded video-replacement scenarios where you want the story to play on its own.

Display Mode

Strips all UI - no toolbar, no hotspots, no panels. Outputs only the 3D viewer with the active model rotating or sitting in idle. Intended for embedding in pages where you want the model visible but uncluttered by controls.

Export button

Downloads the selected format as a self-contained HTML file. This file can be opened in any browser without an internet connection (assuming the model data is embedded) and shared or hosted independently. No account required.

Publish to Cloud button

Uploads the selected format to your Model Viewer Studio cloud project and generates a shareable URL. This button is only visible when you are signed in and have a project open. The published URL updates in place - republishing overwrites the previous version at the same link.

Section 02

3D Models

Each loaded model appears as a collapsible card in this panel. Cards can be reordered by dragging. The active model - the one currently displayed in the viewer - is highlighted. Click Select on any card to switch the viewer to that model.

Display Name

The name shown in the published presentation's model carousel and info panel. This is separate from the filename. Edit it directly in the text field at the top of the model card.

Description 🔗 Link

A short text description shown beneath the model name in the presentation's info panel. The 🔗 Link button lets you attach a URL to the description text - useful for linking to a product page, spec sheet, or external resource. The linked text appears as a clickable element in the published output.

Branding

Branding settings control how your logo appears in the published presentation. These settings are project-level - the same logo and branding preference applies to all models and all export formats within the project.

No Branding toggle

When enabled, the logo is hidden in the studio preview and in all published output - Presentation, Standalone, and Display Mode. The logo upload controls are greyed out while No Branding is active. This setting is saved with the project and is preserved across sessions.

Upload Logo

Upload a logo image to display in the published presentation. Supported formats are PNG, SVG, JPG, and WebP. The logo appears in the presentation toolbar. SVG is recommended for logos with transparency or fine detail, as it scales without quality loss at any display size. The uploaded file is saved with the project and embedded in all export types.

Section 04

Hotspots

Hotspots are interactive pins attached to specific points on the 3D model surface. They stay anchored to their position as the model rotates. Each hotspot is specific to the active model - switching models shows only that model's hotspots.

Add Hotspot

Enables placement mode. Click anywhere on the model surface in the viewer to place a new hotspot at that exact 3D surface point. The hotspot is added to the list and opens for editing immediately after placement.

Jump to Hotspot

Clicking a hotspot entry in the panel moves the camera to show that hotspot's position in the viewer. Useful for checking placement when the hotspot is on a part of the model currently out of view.

Edit panel

Title

The heading shown in the hotspot info panel when a user clicks the pin in the presentation. Keep it short - one to four words works best for the panel layout.

Description

The body text shown in the hotspot info panel. Supports plain text. There is no character limit, but longer descriptions will scroll within the panel rather than expanding it.

Link

An optional URL shown as a button at the bottom of the hotspot info panel. The link opens in a new tab. Leave blank to show no link button.

Type - Info / Animation

Info hotspots display the title, description, and link when clicked. Animation hotspots trigger a model animation clip instead of opening an info panel - the pin acts as a play button. Select Animation to reveal an animation clip selector for this hotspot.

Camera View on Click

Saves the current camera position and associates it with this hotspot. When a user clicks the hotspot in the presentation, the camera moves to this saved position before showing the info panel. If no camera view is saved for a hotspot, the camera does not move on click.

Visibility

Controls whether this hotspot is visible in the published output. Hiding a hotspot removes it from the presentation without deleting it - useful for temporarily removing a pin without losing its position and content.

Reposition

Re-enables placement mode for this specific hotspot. Click a new location on the model surface to move the pin to that point. The hotspot's content (title, description, link) is preserved during repositioning.

Delete

Permanently removes the hotspot. This cannot be undone.

Section 05

Camera

Camera settings control how users can navigate the 3D scene in the published presentation. Limits restrict user movement to a defined range, useful for preventing disorienting or off-model views.

Reset Camera View

Returns the studio viewer to the default camera position for the active model. If a saved camera view exists (set via Set Camera View on the model card), this resets to that saved position. Also available as a button in the top-right of the viewer. This only affects the studio - use Set Camera View on the model card to save a position for the published output.

Camera Limits

Min FOV / Max FOV

Sets the minimum and maximum field of view (in degrees) available to users when pinch-zooming or scroll-zooming. Narrowing the range prevents users from zooming so close that geometry becomes unreadable, or so far out that the model is a speck. Leave at defaults if no zoom restriction is needed.

Prevent Below Ground

When enabled, restricts vertical camera orbit so users cannot rotate below the model's ground plane. Prevents unnatural views from beneath the model. Useful for objects on surfaces - furniture, vehicles, architecture.

Disable Pan

When enabled, removes the ability to pan (translate) the camera. Users can still orbit and zoom, but cannot shift the model off-centre. Keeps the model framed in the centre of the viewer at all times.

AR Settings

Enable AR

Toggles AR availability for the active model in the published presentation. When enabled, an AR button appears in the toolbar for this model. When disabled, the AR button is hidden regardless of the user's device capabilities. AR settings are per-model - each model can have AR independently enabled or disabled.

Placement

Controls how the model is anchored in AR. Floor places the model on detected horizontal surfaces (tables, floors). Wall places the model on detected vertical surfaces. Choose based on what the model represents - furniture and objects typically use Floor; artwork and mounted objects use Wall.

Scale

A multiplier applied to the model's size in AR. At 1.0 the model appears at its native GLB dimensions. Values below 1 make the model smaller in AR; values above 1 make it larger. If your model was exported at an unexpected unit scale (centimetres instead of metres, for example), use this to correct the AR size without re-exporting the file.

CTA Label

The text shown on the call-to-action button inside the AR experience. Customise this to match the context - for example, "Shop Now" or "Request a Quote". Leave blank to show no CTA button in AR.

CTA URL

The URL the CTA button links to within the AR experience. This is separate from the model's description link and only appears during an active AR session.

Device support: AR uses WebXR, Android Scene Viewer, and iOS Quick Look depending on the user's device and browser. On unsupported browsers or desktop devices, the AR button is hidden automatically. AR requires the presentation to be served over HTTPS.

Section 06

Material Editor

The Material Editor lets you inspect and edit the PBR (physically based rendering) properties of individual materials on the active model. Changes update the viewer in real time and are saved with the project. Material edits made here can also be captured into Product Variations.

Pick Material

A dropdown listing all materials present in the active model's GLB file. Select a material to load its current properties into the editor below. Material names come from the GLB file itself - if names are generic (e.g. Material.001), they reflect how the file was exported from the 3D application.

Base Colour

The albedo or diffuse colour of the material. For metallic surfaces this tints the reflection; for non-metallic surfaces it defines the visible surface colour. Accepts a colour picker or hex value.

Metalness

A 0–1 slider controlling how metallic the material appears. At 1.0 the surface reflects its environment like polished metal. At 0 it behaves as a dielectric (plastic, fabric, paint). Most real materials are either fully metal or fully non-metal; intermediate values are physically unusual.

Roughness

A 0–1 slider controlling surface micro-roughness. At 0 the surface is a perfect mirror with sharp reflections. At 1 it is fully diffuse with no specular highlight. Most materials fall somewhere between 0.3 and 0.8.

Emissive

Adds a self-illumination colour to the material, making it appear to glow. Emissive does not cast light on surrounding geometry - it is a visual effect on the surface only. Useful for screens, indicator lights, and neon elements.

Texture

Allows uploading a replacement base colour texture map for this material. The uploaded image overrides the Base Colour setting. Supported formats are PNG and JPG. The texture is embedded in the project and exported with the presentation.

Double Sided

When enabled, the material renders on both the front and back faces of polygons. Useful for thin geometry like fabric, paper, or leaves where the back face would otherwise be invisible. Enabling this has a small performance cost.

Copy / Paste

Copy saves all current material property values to a clipboard. Paste applies those values to the currently selected material. Use this to quickly transfer a set of material properties from one material to another without re-entering each value manually.

Section 07

Model Categories

Categories let you group models into named tabs in the published presentation. A tab row only appears in the output when at least two categories have at least one model assigned. If you have fewer than two populated categories, no tab UI is shown to end users.

Add Category

Creates a new named category. Once created, it appears in the Category dropdown on each model card and in the tab row of the published presentation. Categories exist at the project level and apply across all models.

Show 'All' tab

When enabled, the presentation includes an All tab at the start of the category tab row, which shows every model regardless of category assignment. When disabled, users can only browse models within a specific category.

Sort Alphabetically

When enabled, category tabs are displayed in alphabetical order. When disabled, tabs appear in the order categories were created.

Hide Uncategorised

When enabled, models with no category assigned are excluded from the published presentation entirely. When disabled, uncategorised models appear in the All tab (if shown) but do not appear under any named category tab.

Section 08

Product Variations

Variations let users switch between different material configurations of the same model in the published presentation - for example, showing a product in different colours or finishes. The original materials of the GLB file are always preserved as the hidden baseline that every variation builds from.

Add Variation

Creates a new named variation for the active model. Variations are independent of each other - each one stores its own material overrides and is applied fresh from the original GLB materials, so combinations between variations do not accumulate unexpectedly.

Name

The label shown on the variation selector in the published presentation. Displayed as a swatch label or thumbnail caption depending on the display toggle.

Thumbnail / Swatch toggle

Controls how this variation appears in the presentation's variation selector. Thumbnail mode shows a captured image (useful for photorealistic previews). Swatch mode shows a flat colour circle (useful for colour options). The colour picker below sets the swatch colour when Swatch mode is active.

Material list

Lists the materials currently overridden by this variation. Each entry shows the material name and its modified properties. Removing a material from this list restores that material to its original GLB values when this variation is active.

Add Material

Opens a picker to select a material from the active model and add it to this variation's override list. After adding, configure the material's overridden properties in the entry that appears. The same material can exist in multiple variations with different settings.

Section 09

Environment & Lighting

This panel covers both the image-based lighting that illuminates the model and the visual appearance of the viewer canvas behind it. All settings here are per-model - each model in your project can have its own environment and background configuration, saved and restored when you switch between models.

Environment

Environment presets

A set of built-in HDR environment images available without uploading a file. Each preset produces a different lighting character - neutral studio, outdoor sky, warm interior, and others. Selecting a preset replaces any previously loaded custom environment file.

Choose HDR File

Upload a custom environment image. Accepted formats are HDR and JPG (for gain-map HDR). The file is saved with the project and embedded in exports. The environment image drives the image-based lighting on the model surface - this is distinct from the background image and affects the model whether or not the environment is visible as a backdrop. If you need to convert an EXR or HDRI to a gain-map JPG for smaller file sizes, the studio links to a free conversion tool at gainmap-creator.monogrid.com.

Copy / Paste Environment

Copies all environment and scene settings from the active model - including the environment file, canvas style, shadow intensity, shadow softness, and exposure - and pastes them to another model. Useful for maintaining consistent scene settings across multiple models without reconfiguring each one manually.

Canvas & Background

Canvas Style - Gradient / Solid

Controls the background fill of the 3D viewer. Gradient blends between two colours, creating a radial vignette effect common in product photography. Solid fills the viewer with a single flat colour. The label for the first colour picker changes to Background Colour when Solid is selected.

Outer Colour / Inner Colour

In Gradient mode, Outer Colour sets the colour at the edges of the viewer and Inner Colour sets the colour at the centre. The gradient radiates outward from the centre.

Background Image

Uploads an image to use as the viewer background instead of the canvas gradient or solid colour. The image fills the viewer behind the model. The environment lighting setting remains independent - you can use a background image with any lighting configuration. Supported formats are JPG and PNG.

Shadow Intensity

Controls the opacity of the contact shadow cast beneath the model on the ground plane. Set to 0 to remove the shadow entirely. Higher values produce a darker, more visible shadow.

Shadow Softness

Controls the spread or blur radius of the contact shadow. A low value produces a tight, sharp shadow edge. A high value spreads the shadow into a soft, diffuse blur. Works in combination with Shadow Intensity.

Exposure

Brightens or darkens the entire scene, including the model and environment. Increasing exposure lifts the overall brightness without changing the lighting setup. Useful for compensating for environments that are inherently dark or very bright.

Contrast

Increases or decreases the tonal difference between highlights and shadows across the scene. Higher contrast makes the image punchier; lower contrast flattens it toward mid-grey. Applied as a CSS post-process filter on the viewer canvas.

Saturation

Controls colour intensity across the entire scene. At 100% (default) colours are unchanged. Below 100% the scene shifts toward greyscale. Above 100% colours become more vivid. Applied as a CSS post-process filter.

Hue Tint

Rotates the hue of the entire scene through the colour wheel (0°–360°). Small adjustments can warm or cool the scene; larger values shift all colours noticeably. Applied as a CSS hue-rotate filter. Most users leave this at 0°.

Hotspot Colours

Sets the colours for hotspot pin elements - the info pin colour, the animation pin colour, and the pin border colour. These are per-model settings, so different models in the same project can use different hotspot colour schemes. Changes apply to all hotspots on the active model.

Section 10

Timeline

The Timeline lets you create a guided, step-by-step experience for each model. Each step can move the camera, trigger animations, fade materials, display text, and play audio. Steps play in sequence, either manually (user taps Next) or automatically with a timed delay.

To create a timeline for a model, click Create Timeline in that model's card in the 3D Models panel. The timeline belt opens at the bottom of the viewport. Use Add Step to add steps, drag the ⠿ handle to reorder them, and click a step card to select and edit it. The Model dropdown in the belt header lets you switch between models without leaving the timeline. Click Close Timeline to collapse the belt.

Basic Tab

Step Title

A short label for this step. Displayed to the viewer during playback if the presentation includes a tour UI.

Step Description

Supporting text shown below the title during playback. Accepts formatted links via the 🔗 Link button - highlight text in the description field and click Link to attach a URL.

Step Advance

Controls how the viewer moves to the next step. Manual requires the user to tap Next. Auto advances after a set number of seconds - use the seconds input that appears alongside it.

Voiceover / Audio

Attach an audio file (.mp3, .wav, .ogg) to play during this step. The file uploads and is stored in the cloud with the project. Audio plays when the step activates. Note: audio will not autoplay on some mobile browsers due to platform restrictions - it requires a prior user interaction on the page.

Camera Tab

Camera Position

Defines where the camera moves to when this step activates. Position the camera in the viewport exactly where you want it, then click Copy Position to capture it. The saved position is shown as orbit/FOV/target values. Click Paste Position to apply a previously copied position, or Clear to remove the saved position and let the camera stay wherever it currently is.

Animation & Materials Tab

Animation Clip

Select an animation clip from the model to play during this step. The dropdown lists all clips embedded in the GLB. Choose a clip and set its playback mode: Play Once runs it through once and stops; Loop repeats it for the duration of the step.

Pick Material / Material Fades

Allows you to change the opacity of individual materials during this step - useful for revealing internal parts, highlighting components, or creating transparency effects. Click Pick Material (the cursor changes to a crosshair) then click directly on a surface of the model to select it. The material appears in the list below with an opacity slider. Add as many materials as needed. Each step has its own independent set of material states - materials not listed in a step retain whatever state the previous step left them in.

Timeline controls

Loop Timeline

A toggle at the bottom of the belt. When enabled, the sequence loops back to step 1 after the final step completes.

Delete Timeline

Removes all steps from the model and closes the belt. The Create Timeline button returns to the model card.

Model Viewer Studio Reference