Skip to content

Replacement textures in production

A texture uploaded in the editor exists only as a local browser object URL. The export stores its filename and marks it as a replacement; production must map that name to a deployed URL.

tsx
<ModelLabViewer
  src="/models/product.glb"
  preset={preset}
  textureUrls={{
    'fabric-blue.webp': '/assets/product/fabric-blue.webp',
    'fabric-normal.webp': '/assets/product/fabric-normal.webp',
  }}
  onTextureError={(name, error) => {
    console.error(`Texture ${name} failed`, error)
  }}
/>

Restored properties

After loading, the runtime restores color space, wrap modes, repeat, offset, center, rotation, and flipY.

Asset pipeline recommendation

  1. Export the preset.
  2. Copy all replacement textures into a versioned product folder.
  3. Generate textureUrls from your asset manifest.
  4. Validate every mapped URL during CI or a content-publishing step.

Missing mappings

A missing replacement mapping does not invent a URL. Handle the error and decide whether to retain the model's original texture or block publication.

Released under the MIT License.