3D & AR configurators for furniture and interior brands.

// Three.js configurator boilerplate — GLTF load, material swap, orbit controls.
// Runs in ~120 lines with Draco compression. Drop into any React component.

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

type ConfiguratorOpts = {
  container: HTMLElement;
  modelUrl: string;               // /models/sofa-cloud.glb
  onLoaded?: () => void;
};

export function createConfigurator({ container, modelUrl, onLoaded }: ConfiguratorOpts) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf5f2ed);

  const camera = new THREE.PerspectiveCamera(
    35, container.clientWidth / container.clientHeight, 0.1, 100,
  );
  camera.position.set(3.2, 1.4, 3.4);

  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  container.appendChild(renderer.domElement);

  // Lighting — studio-style three-point.
  scene.add(new THREE.AmbientLight(0xffffff, 0.35));
  const key = new THREE.DirectionalLight(0xffffff, 1.4);
  key.position.set(5, 8, 5);
  scene.add(key);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.minPolarAngle = Math.PI / 6;
  controls.maxPolarAngle = Math.PI / 2;

  // Draco compression cuts model size ~10×.
  const draco = new DRACOLoader();
  draco.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/');
  const loader = new GLTFLoader().setDRACOLoader(draco);

  const materialsByName = new Map<string, THREE.MeshStandardMaterial>();
  loader.load(modelUrl, (gltf) => {
    gltf.scene.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        const mesh = child as THREE.Mesh;
        const mat = mesh.material as THREE.MeshStandardMaterial;
        materialsByName.set(mesh.name, mat);
      }
    });
    scene.add(gltf.scene);
    onLoaded?.();
  });

  function tick() {
    requestAnimationFrame(tick);
    controls.update();
    renderer.render(scene, camera);
  }
  tick();

  // Public API — the configurator UI calls these on user interaction.
  return {
    swapFabricColor(meshName: string, hex: number) {
      const mat = materialsByName.get(meshName);
      if (mat) mat.color.setHex(hex);
    },
    swapTexture(meshName: string, textureUrl: string) {
      const mat = materialsByName.get(meshName);
      if (!mat) return;
      new THREE.TextureLoader().load(textureUrl, (tex) => {
        tex.colorSpace = THREE.SRGBColorSpace;
        mat.map = tex;
        mat.needsUpdate = true;
      });
    },
    dispose() {
      renderer.dispose();
      draco.dispose();
      container.removeChild(renderer.domElement);
    },
  };
}