https://framer.com/m/ModelViewer3d-lCbsvJ.js

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / Enhancements / ModelViewer3d

ModelViewer3d

ModelViewer3d puts a glTF model in the page and lets the reader turn it. One file, five looks — textured, clay, wireframe, hologram or normals — with background, clay, wire and glow read from the theme tokens.

Enhancements37 controlsglTF / glbfive display modes

Enhancements9 controlsWebGL pointsthree data modes

Examples

Seven live specimens, all reading the same glb hosted in this project.

Display modes

mode draws the same file five ways. Textured keeps the model’s own materials; Shaded replaces them with one clay colour; Wireframe lays the edges over that clay; Hologram is an additive fresnel shell; Normal maps surface direction to colour.

Textured

Add a .glb file or model URL

Shaded

Add a .glb file or model URL

Wireframe

Add a .glb file or model URL

Hologram

Add a .glb file or model URL

Normal

Add a .glb file or model URL

Hologram

Hologram forces bloom on. hologram sets the shell colour and fresnel decides how hard the rim burns, while alpha and intensity set how solid it reads. The scanline sweeps at speed, in bands of density and width.

fresnel 5 · bloom 1.4 · density 12

Add a .glb file or model URL

Camera and ground

azimuth and elevation park the camera, fov picks the lens and framing decides how much air is left around the model. shadow drops a contact shadow and grid draws a ground plane; both take a theme token for their colour.

azimuth 120° · elevation 40° · fov 22 · grid on · shadow 1.6

Add a .glb file or model URL

Props

All 37 controls on the instance panel. Rows that say “Needs …” only appear once that switch is on.

Prop	Type	Behaviour
modelFile	file	The .glb or .gltf to draw, uploaded into the project. Takes priority over the URL.
modelUrl	string	A hosted .glb, used when no file is uploaded.
displayMode	enum	Textured, Shaded, Wireframe, Hologram or Normal — one file, five looks.
background	color	Panel behind the model. Empty follows the theme; Hologram wants a dark one.
clayColor	color	The white-model colour used by Shaded and Wireframe.
wireColor	color	Edge colour in Wireframe.
wireOpacity	number	How strongly the edges sit over the clay. 0–1, default 0.35.
holoColor	color	Shell colour in Hologram. Empty reads --holo-color.
holoIntensity	number	Brightness of the shell. 0–3, default 1.
holoAlpha	number	How solid the shell reads. 0–1, default 0.9.
holoFresnel	number	How hard the rim burns. 0.5–6, default 1.5.
holoScan	boolean	Sweeps scanlines through the shell.
holoScanSpeed	number	Scanline sweep speed. Needs Scanline on.
holoScanDensity	number	How many scan bands. 0.5–40, default 2.
holoScanWidth	number	Thickness of each band. 0.02–1, default 0.2.
bloom	boolean	Adds a bloom pass. Hologram forces it on.
bloomStrength	number	Bloom amount. 0–3, default 0.8. Needs Bloom on.
bloomRadius	number	How far the bloom spreads. Needs Bloom on.
bloomThreshold	number	How bright a pixel must be before it blooms.
exposure	number	Tone-mapping exposure. 0–3, default 1.
envIntensity	number	Strength of the room environment light.
fov	number	Camera lens, 15–75°. Lower reads flatter.
azimuth	number	Starting turn of the camera, −180…180°.
elevation	number	Starting height of the camera, −20…80°.
padding	number	Air left around the model. 1 is tight, 3 is loose.
autoRotate	boolean	Turns the model until the reader grabs it.
rotateSpeed	number	Auto-rotate speed. Needs Rotate on.
enableZoom	boolean	Lets the wheel zoom the camera.
enablePan	boolean	Lets a drag move the model off centre. Off by default.
shadow	boolean	Contact shadow under the model.
shadowColor	color	Shadow colour. Takes a theme token.
shadowStrength	number	Shadow opacity. 0–2, default 1.
grid	boolean	Draws a ground plane under the model.
gridColor	color	Grid line colour. Takes a theme token.
playAnimation	boolean	Plays the animation clips inside the file.
clipIndex	number	Which clip to play. Needs Animation on.
onLoad	event	Fires once the model has finished loading.

Prop	Type	Behaviour
modelFile	file	The .glb or .gltf to draw, uploaded into the project. Takes priority over the URL.
modelUrl	string	A hosted .glb, used when no file is uploaded.
displayMode	enum	Textured, Shaded, Wireframe, Hologram or Normal — one file, five looks.
background	color	Panel behind the model. Empty follows the theme; Hologram wants a dark one.
clayColor	color	The white-model colour used by Shaded and Wireframe.
wireColor	color	Edge colour in Wireframe.
wireOpacity	number	How strongly the edges sit over the clay. 0–1, default 0.35.
holoColor	color	Shell colour in Hologram. Empty reads --holo-color.
holoIntensity	number	Brightness of the shell. 0–3, default 1.
holoAlpha	number	How solid the shell reads. 0–1, default 0.9.
holoFresnel	number	How hard the rim burns. 0.5–6, default 1.5.
holoScan	boolean	Sweeps scanlines through the shell.
holoScanSpeed	number	Scanline sweep speed. Needs Scanline on.
holoScanDensity	number	How many scan bands. 0.5–40, default 2.
holoScanWidth	number	Thickness of each band. 0.02–1, default 0.2.
bloom	boolean	Adds a bloom pass. Hologram forces it on.
bloomStrength	number	Bloom amount. 0–3, default 0.8. Needs Bloom on.
bloomRadius	number	How far the bloom spreads. Needs Bloom on.
bloomThreshold	number	How bright a pixel must be before it blooms.
exposure	number	Tone-mapping exposure. 0–3, default 1.
envIntensity	number	Strength of the room environment light.
fov	number	Camera lens, 15–75°. Lower reads flatter.
azimuth	number	Starting turn of the camera, −180…180°.
elevation	number	Starting height of the camera, −20…80°.
padding	number	Air left around the model. 1 is tight, 3 is loose.
autoRotate	boolean	Turns the model until the reader grabs it.
rotateSpeed	number	Auto-rotate speed. Needs Rotate on.
enableZoom	boolean	Lets the wheel zoom the camera.
enablePan	boolean	Lets a drag move the model off centre. Off by default.
shadow	boolean	Contact shadow under the model.
shadowColor	color	Shadow colour. Takes a theme token.
shadowStrength	number	Shadow opacity. 0–2, default 1.
grid	boolean	Draws a ground plane under the model.
gridColor	color	Grid line colour. Takes a theme token.
playAnimation	boolean	Plays the animation clips inside the file.
clipIndex	number	Which clip to play. Needs Animation on.
onLoad	event	Fires once the model has finished loading.

Usage

Guidance carried over from the component definition.

Reach for ModelViewer3d

A product, part or prop should be inspectable rather than photographed.

One glb has to carry several looks — a clay study and a finished render.

The model must sit on the page’s own colours instead of a baked backdrop.

The object should keep turning on its own, and stop when the reader grabs it.

Reach for something else

The subject is a diagram or an ordered stack — SolarIso draws that as line art.

The page wants a globe or cloud of points rather than a mesh — this renders glTF geometry only.

The device cannot be asked to run WebGL, or a still image would say the same thing.

Io — Enhancements

Every specimen above is a live component instance, and they share one glb hosted in this project. Background, clay, wire, glow, shadow and grid resolve from the project theme tokens.