How to Add 3D Models to Your Website

Putting 3D models on website pages used to mean a plugin or a custom engine. Today the path is well worn: export the model as glTF, optimize it, and display it with either a ready-made web component or a 3D library. The hard parts are usually the model itself, the file size and the fallback, more than the code.

Here is the process in order, with the decisions you will need to make at each step.

Step 1: Decide what the model is for

Start with the job, because it decides everything else.

• Inspect a product. A shopper spins a kettle, a chair or a packaging box to see every side. This is the most common and most useful case.
• Configure a product. Colors, materials and parts change on the model. That is a bigger project; our post on 3D product configurators covers it.
• Place it in a room. Augmented reality on a phone, so a customer sees the real size at home.
• Set a mood. A hero object that moves as you scroll. Valuable for some brands, decorative for others.

If you can't name the job, good photos or a short video may do the work with far less weight. One of our own apps shows progress as a painted mountain scene built from layered illustrations and animated with plain CSS, which gives a sense of depth without any 3D engine at all.

Step 2: Get the model into glTF

glTF is the format to aim for. The Khronos Group, which maintains it, describes it as a royalty-free specification for efficient transmission and loading of 3D scenes and models, and calls it "the JPEG of 3D." glTF 2.0 is also an international standard, ISO/IEC 12113:2022. It supports physically based materials, so metal, plastic and fabric respond to light realistically.

It comes in two forms: a .gltf file (JSON that points to separate binary and texture files) and a single binary .glb file. For a website, one .glb is usually easier to host and cache.

Where models come from:

• CAD files from a manufacturer. Common for packaging, furniture and equipment. These are often far too detailed for the web and need retopology, which means rebuilding the mesh with fewer polygons.
• A 3D artist's model from Blender, Cinema 4D or similar, exported to glTF.
• Photogrammetry or scanning, for organic objects that are hard to model by hand. Expect cleanup.

The three.js manual recommends glTF where possible, noting that because the format is focused on runtime asset delivery it is compact to transmit and fast to load, and that both the .glb and .gltf versions are well supported.

Step 3: Optimize before you publish

An unoptimized model is the most common reason a 3D page feels broken. Work through this list:

• Reduce polygons until the silhouette starts to suffer, then stop.
• Compress geometry. glTF supports Draco and meshopt compression through extensions. The three.js GLTFLoader supports both, once you give it a DRACOLoader or a meshopt decoder.
• Compress textures. Khronos lists an extension for KTX 2.0 textures with Basis Universal compression, which GLTFLoader reads through a KTX2Loader. GLTFLoader also supports WebP and AVIF textures through extensions.
• Shrink texture sizes. A model shown 600 pixels wide does not need 4K textures.
• Reuse materials where you can, so the scene stays simpler to render.
• Test on a mid-range phone, on cellular data, before anyone signs off.

Step 4: Choose how to display it

There are two practical routes.

Route A: the model-viewer web component. Google's open-source model-viewer is a web component for showing interactive 3D models, optionally in AR. You add one script, then an HTML element whose "src" points to your file; its documentation says only glTF and GLB models are supported. It handles camera controls, sensible lighting defaults, a poster image while loading, and AR. The project's site says it is supported on the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari.

For AR, you add the "ar" attribute and list "ar-modes" in order of priority: webxr (AR in the browser), scene-viewer (the Scene Viewer app) and quick-look (iOS Quick Look). Quick Look uses a USDZ file. The model-viewer docs note that if you don't supply one with "ios-src", the USDZ is generated on the fly when the user taps the AR button. They also warn that the generated file is imperfect, with animations not yet supported, so an animated product is a reason to supply your own USDZ. WebXR mode requires the page to be served over HTTPS.

This is the right choice for most product pages: quick to ship, good defaults, very little custom code.

Route B: a 3D library such as three.js. If the model is part of a larger scene, reacts to scroll, needs custom shaders or feeds a configurator, you build it with a library. three.js loads glTF with GLTFLoader and gives you full control, along with full responsibility for loading states, performance and fallbacks. Our post on WebGL explains when that extra power is worth paying for.

A rule of thumb: if the brief is "let people rotate the product and see it in their room," use model-viewer. If the brief includes the words "experience" or "scene," budget for a library build.

Step 5: Make it fast and accessible

• Show a poster first. model-viewer has a "poster" attribute for an image shown until the model is ready. Size it correctly so the layout doesn't jump.
• Load on demand. model-viewer's "loading" attribute supports lazy loading, which loads the model when it is near the viewport. With a library build, defer the model until it is needed or until the visitor taps "View in 3D."
• Write a text alternative. model-viewer's "alt" attribute describes the model to people using screen readers, the same way image alt text does.
• Keep scrolling sane on phones. Make sure dragging the model doesn't trap the page.
• Respect reduced motion. Don't auto-rotate for visitors who have asked their system for less motion.
• Keep the photos. 3D adds to a product gallery. Search engines, slow connections and quick shoppers still rely on images.

Common mistakes with 3D models on a website

• Uploading the CAD file straight from the factory, at tens of megabytes.
• Lighting that makes a white product look gray, because nobody checked it against the real thing.
• A 3D viewer at the top of a mobile page, pushing price and the buy button out of sight.
• No fallback when a device can't render 3D.
• Treating 3D as a launch feature with no plan for adding models for new products.

How Pinn.Media builds 3D for the web

We handle the full chain: modeling or cleaning up source files, optimization, and the build, whether that is a model-viewer gallery on a product page or a custom three.js scene. If you have products you would like customers to see in 3D, book a discovery call and send a few product files ahead of time.