Why a 3D file is not yet a web asset
Most manufacturers already have 3D files. They were made for design and production, and they describe every screw thread, internal rib and weld at engineering precision. A browser on a phone must download the model over a mobile connection and redraw it many times a second. Given an engineering file, it would take minutes to load and then stall.
A web asset is a different object made for a different job: to look like the product from the outside, at the distances a customer will view it, while being as small as possible. Producing it is skilled work that sits between engineering and design, and it is frequently the largest and least expected part of a 3D web project. Knowing the steps lets you budget for it and judge the results.
Choose the source for each model
| Source | Strength | Work needed | Suits |
|---|---|---|---|
| Engineering (CAD) files | Exact dimensions and proportions | Heavy reduction and cleanup. Materials must be created from nothing | Manufactured products with existing files |
| 3D scanning or photogrammetry | Captures real shape and surface, including wear and texture | Cleanup, rebuilding of the mesh, correction of reflective or transparent parts | Organic, crafted or one-off objects |
| Modelling from drawings and photographs | Clean, efficient models built for the web from the start | Skilled modelling time, and reference material | Products with no usable files, or simple forms |
| Existing marketing renders or game-style models | Already look good | Usually still too heavy. Check rights to reuse | Products that already have visualization work |
Before sharing engineering files with anyone, decide what may leave the company. They can contain internal details and tolerances you would not publish. A web model shows only the exterior, and removing the internals early protects the design as well as reducing the size.
Reduce the geometry to what the eye needs
- 01
Remove what cannot be seen
Internal parts, hidden faces, fasteners under covers. In a typical engineering file this is most of the data.
- 02
Simplify the surfaces
Rebuild the visible shape with far fewer triangles, keeping more where curves and silhouettes matter and fewer on flat areas.
- 03
Move detail into textures
Fine features such as stitching, grooves, knurling and small bevels are baked into image maps that make a simple surface appear detailed under light.
- 04
Merge and instance
Combine parts that never move or change separately, and reuse one copy of repeated parts such as wheels or handles.
- 05
Fix the basics
Correct scale in real units, a sensible origin point, consistent orientation, clean surface normals and no stray geometry.
- 06
Make levels of detail if needed
A lighter version for distant views or weaker devices, swapped automatically.
Automatic reduction tools give a quick first pass and often damage silhouettes, logos and curved edges. For hero products, expect manual work by someone who can see what matters visually.
Create materials that respond to light
Shape is half of realism. The other half is how surfaces react to light: whether metal looks brushed or polished, whether leather has grain, whether plastic is matte. The web uses a standard approach known as physically based materials, in which each surface is described by a small set of properties and image maps for colour, roughness, metalness and surface relief.
- Work from physical samples. Screens and photographs mislead. The artist needs the real fabric swatch, paint chip or finished part, or accurate reference values.
- Build a material library. Create each finish once and reuse it across products. A configurator with twenty fabrics needs twenty good materials, not twenty copies of the sofa.
- Mind texture sizes. Image maps are usually the heaviest part of a file. Use the smallest resolution that holds up at the closest zoom you allow, and compress them in formats designed for graphics hardware.
- Be careful with glass, liquids and fine hair or fur. Transparency and soft materials are costly to draw and hard to make convincing. Simplify or stylize where you can.
- Agree the lighting. Materials are judged under a particular lighting setup. Fix it early, because changing it later changes how every material looks.
Formats, and structure for options
For the web, the standard delivery format is glTF, usually in its single-file form with the extension glb. It is an open format maintained by the Khronos Group, designed for efficient loading, and supported by the common web 3D libraries. Apple devices use a format called USDZ for viewing objects in a room through the camera, so a product offered in augmented reality on iPhones needs that version too.
- 01
Which parts will change?
Why it mattersAnything a customer can swap, recolour, hide or move must be a separate, clearly named part of the model.
- 02
Is naming consistent?
Why it mattersPart and material names are how the software finds things. Agree a naming scheme and apply it to every model.
- 03
Do options share attachment points?
Why it mattersInterchangeable parts, such as different legs on one table, need the same position and orientation so that they swap without adjustment.
- 04
Is colour a material change or a new texture?
Why it mattersChanging a plain colour is nearly free. Changing a patterned fabric means loading new image maps.
- 05
Are files split sensibly?
Why it mattersLoad the base product first and fetch options when chosen, instead of one file containing everything.
- 06
Where are the originals kept?
Why it mattersThe editable source files, not only the exports, with versions, so that a change next year does not mean starting again.
A worked example
Preparing an office chair for a configurator
This example is invented to show the size of the change between source and web asset. A furniture maker supplies engineering files for an office chair offered with 3 bases, 2 arm types and 24 fabrics.
- SourceThe engineering file is 480 megabytes and contains the gas lift mechanism, every bolt and the internal foam structure.
- ReductionInternals are removed. The visible shell is rebuilt, with stitching and mesh-back perforations moved into textures. The base model comes to 2.1 megabytes.
- StructureBases and arms are separate parts sharing attachment points, named by a fixed scheme. Each loads only when selected.
- MaterialsFabric swatches are posted to the artist. Twenty-four fabrics reduce to 5 weave textures, each with several colours applied as tints, so only 5 sets of maps are needed.
- ReviewThe maker's product manager compares the model with a real chair under the agreed lighting. The seat looks too flat, and two greens are indistinguishable. Both are corrected before sign-off.
The chair loads in a couple of seconds on a mid-range phone. Because fabrics were built as a shared library, the next three chair models reuse them, and each costs far less to prepare than the first.
Set a size budget and a review process
A controlled pipeline
- A stated size and triangle budget per model, agreed before work starts
- Every delivered file measured against it automatically
- Load time tested on a mid-range phone over a mobile connection
- A written checklist for scale, naming, origin and materials
- Sign-off by someone who knows the physical product
An uncontrolled one
- Models accepted because they look good on the artist's workstation
- No one checking file sizes until the page is slow
- Each model named and structured differently
- Colours approved from a screenshot
- Only exported files kept, with no editable source
The right budget depends on how many models appear at once and on your audience's devices, so set it with whoever builds the viewer and test early with one real product. Our guide to the mobile performance checklist for interactive 3D websites covers the delivery side.
Rights, and what a web model reveals
Anything a browser can display, a determined person can download. A web model should therefore contain nothing you would not publish: no internal mechanisms, no exact tolerances, no unreleased variants hidden inside the file. For most products the exterior shape is already visible to anyone who buys one, and the risk is small. Where it is not, a simplified or stylized model is the answer.
Confirm rights as well. Ownership and licensing terms are defined in the project agreement with whoever produces the models, so check that you receive the editable source files and may reuse the assets in other channels, such as print renders or marketplaces.
3D asset preparation checklist
3D product asset checklist
0 of 11 checkedWhat to do next
Pick one representative product and find out what 3D files exist for it, how large they are and what they contain. Gather physical samples of its finishes. With those in hand, a single pilot model will reveal the effort per product more reliably than any estimate.
Our 3D website development page explains how we prepare and deliver product models. Tell us what files you have and we will say what it would take to make them web-ready.
Common questions
Can we use our CAD files directly on the website?
Not as they are. Engineering files are precise and extremely detailed, which makes them far too large and slow for a browser. They are an excellent starting point for dimensions and shape. A web model is derived from them by removing internals, simplifying surfaces and adding materials, and that conversion is skilled work, not an export setting.
What file format should web 3D models use?
glTF, typically as a single glb file, is the standard for delivering 3D on the web. It is an open format built for efficient loading and is supported by the main web 3D libraries. If you want customers on Apple devices to view products in their room through the camera, a USDZ version is needed as well.
How large should a web 3D model be?
As small as it can be while still looking right at the closest view you allow. The acceptable size depends on how many models load together and on your audience's devices and connections, so agree a budget with your developers and test on a mid-range phone. Textures usually account for most of the weight and offer the largest savings.
How much does it cost to prepare a 3D model?
It varies with the product's complexity, the state of the source files, the number of options and the realism required. A simple hard-surfaced object from clean files is quick. A soft, detailed or highly reflective product takes much longer. Shared material libraries and consistent structure reduce the cost of each additional model considerably.
Can people steal our 3D models from the website?
A model shown in a browser can be extracted by someone with the skills, and no technique fully prevents it. Limit the exposure by publishing only exterior geometry at web resolution, with no internal or production detail. For most products that reveals nothing a buyer could not measure, and the commercial risk is low.