3D Jewelry Customizer and AR Experience

High-end jewelry buyers need more than flat images. They want to see how gold reflects light or how a diamond cut looks in real life.

My team and I built a production-ready eCommerce platform for a jewelry client. We created a 3D customizer and an Augmented Reality (AR) try-on feature. We built this to work in a mobile browser without crashing devices.

Here is how we managed the technical process.

The Asset Pipeline

Jewelry starts as heavy CAD files. These files often exceed 50MB and have millions of polygons. We cannot use these on the web. We built a custom optimization pipeline:

  • Remeshing: We used Blender to reduce polygon counts while keeping clean shapes.
  • Baking Details: We turned complex geometry into 2D Normal Maps. This makes the lighting look detailed without adding heavy files.
  • PBR Texturing: We set specific maps for roughness and metalness to ensure surfaces look real.
  • Compression: We exported assets to GLTF/GLB format. We used Google Draco compression to shrink files from 50MB to under 2MB.

The Rendering Engine

We used Three.js to connect directly to the user GPU. To make metals look luxury-grade, we mapped a high-dynamic-range image (HDRI) as an environment map. This allows the metal to show real-time reflections as users rotate the ring.

We handled material changes through code. When a user selects a metal, we traverse the GLTF scene and update the color, roughness, and metalness values instantly.

Augmented Reality (AR)

We implemented a dual-engine workflow for mobile users:

  • Android: We used Scene Viewer integration.
  • iOS: We used web standards to ensure cross-platform support.

The Lesson

Modern frontend engineering is about building efficient pipelines. You must convert heavy files into lightweight assets. You must ensure high-fidelity experiences work on standard mobile browsers.

Have you built interactive 3D elements or used WebXR in a project? Tell me your optimization methods in the comments.

Source: https://dev.to/tharul/engineering-a-3d-customizer-ar-experience-for-a-jewelry-ecommerce-web-app-2fn4