https://framer.com/m/ModelViewer3d-lCbsvJ.js
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.
Examples
Nine live specimens: eight read the same glb hosted in this project, and one is left without a model to show the placeholder.
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
Shaded
Wireframe
Hologram
Normal
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
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. refine then supersamples the frame and softens those shadows once the view comes to rest — which is what rotateFor and stopOnDrag are for, since a still view is what it needs.
azimuth 120° · elevation 40° · fov 22 · grid on · shadow 1.6
Hotspots
hotspots pins design-system Buttons to a bone or named node in the glb, so they follow the pose and any animation; an empty node means the model centre. Each item sets its text, icon and align, and hotspotButton is the real Button panel for their style. hideBehind fades the ones on the far side. A click only fires an event: onHotspotClick and the window event modelviewer:hotspotclick, carrying eventId as viewerId.
1 hotspot · model centre · icon Info · align Above · layer In component
Placeholder
placeholder sets what shows before the model draws: an optional poster, the Empty, Loading {p}% and Error texts, and a bar or ring tracking the download, which fades out once the first frame lands. Text and indicator colours follow the theme. This specimen has no model, so it holds the Empty state.
No model · Empty text set · Text size Callout · Position Center
Props
All 57 controls on the instance panel. Rows that say “Needs …” only appear once that switch is on.
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.
Parts of the model need labelled, clickable callouts that follow its pose and animation.
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; eight share one glb hosted in this project and one has no model. Background, clay, wire, glow, shadow and grid resolve from the project theme tokens.