3D models as website backgrounds: performance and design

Decide what the 3D is for

A 3D background can make a site memorable or make it slow and hard to read. Decide which job it does:

• Atmosphere: slow, ambient movement behind content.
• Hero object: a product or mascot that reacts to scroll or the cursor.
• Interactive centrepiece: the visitor plays with it.

The more interactive, the more it should be content, not background.

Design patterns that work

• Low contrast behind text. Darken, blur or desaturate the scene where copy sits.
• Slow motion. Gentle rotation or parallax, not constant spinning.
• Scroll-linked changes: the object turns or assembles as the visitor scrolls.
• Cursor tilt: small rotation following the pointer.
• One object, well lit, rather than a busy scene.

Performance as a design constraint

A background loads on every visit, so budget hard:

• Small GLB: a few hundred kilobytes to a few megabytes. Reduce GLB file size.
• Lazy initialisation: load the 3D after the main content and fonts.
• Poster first: show a static image immediately; swap to 3D when ready.
• Cap the frame rate or render only on change (scroll, pointer) instead of continuously.
• Pause when off-screen or when the tab is hidden.
• Lower pixel ratio on high-DPI phones.
• Test on a mid-range phone, not just a laptop.

These protect Core Web Vitals: a heavy canvas can hurt Largest Contentful Paint and responsiveness if it competes with the main content.

Accessibility

• Respect prefers-reduced-motion: show the poster or a still frame instead of animation.
• Keep text contrast compliant over the background.
• Mark decorative 3D as decorative (no meaningful content locked inside the canvas).
• Don't trap focus or scroll inside the 3D area.

Fallbacks

• No WebGL or a weak device: show the poster image.
• Slow connection: keep the poster; skip the 3D.

Lighter alternatives

• A looping video rendered from the 3D model. Often smaller and smoother than real-time 3D for pure atmosphere.
• An image sequence scrubbed by scroll.
• A static render with CSS parallax.

Tools

• three.js: full control. Three.js integration.
• model-viewer: quick for a single object with built-in controls. Embed a 3D model.
• Blender: for rendering the video or poster from the same model.

Getting the model

Use GLB. Best 3D model format for websites explains why. If you need a custom object, a mascot or a stylised version of your product, you can generate one. Vi3W exports GLB with PBR textures and a retopologised mesh, a good starting point for the web.

Need an object for your hero section? Generate it in Vi3W, compress it, and give it a poster image.