Jewellery D2C
3D Configurator E-Commerce Platform

1import * as THREE from "three";
2import { useRef, useEffect } from "react";
3
4const METAL_MATERIALS: Record<string, THREE.MeshStandardMaterial> = {
5  "22K_GOLD": new THREE.MeshStandardMaterial({
6    color: 0xD4AF37, metalness: 0.98, roughness: 0.15,
7    envMapIntensity: 1.8,
8  }),
9  "18K_GOLD": new THREE.MeshStandardMaterial({
10    color: 0xC5A028, metalness: 0.95, roughness: 0.18,
11  }),
12  "PLATINUM": new THREE.MeshStandardMaterial({
13    color: 0xE8E8E8, metalness: 0.99, roughness: 0.10,
14  }),
15  "SILVER": new THREE.MeshStandardMaterial({
16    color: 0xC0C0C0, metalness: 0.97, roughness: 0.20,
17  }),
18};
19
20export function JewelleryConfigurator({ modelUrl, onConfigChange }) {
21  const mountRef = useRef<HTMLDivElement>(null);
22
23  const applyMetal = (metalKey: string) => {
24    scene.traverse((obj) => {
25      if ((obj as THREE.Mesh).isMesh && obj.userData.partType === "metal") {
26        (obj as THREE.Mesh).material = METAL_MATERIALS[metalKey];
27      }
28    });
29    renderer.render(scene, camera);
30    onConfigChange({ metal: metalKey, price: calculatePrice(metalKey) });
31  };
32
33  return <div ref={mountRef} className="w-full aspect-square" />;
34}