Inicio / Lab / Configurador 3D de una silla, paso a paso, con precio y AR

Estable

Configurador 3D de una silla, paso a paso, con precio y AR

Una silla que se monta paso a paso en el navegador: tela, color, madera, patas y costura, con el precio al momento, su etiqueta cosida y AR.

Silla tapizada en bouclé granate terminada en el configurador, con su etiqueta cosida «La del salón» y el resumen de la configuraciónAbrir el experimento
Estado
Estable
Fecha
15 de octubre de 2026
Explora
Configurador 3D · Realidad aumentada · Materiales · Captación de leads
Hecho con
Three.js · React Three Fiber · model-viewer · React

Qué es

Un configurador de producto completo sobre una silla de ejemplo. Se monta paso a paso, una decisión cada vez: la tela, el color, la estructura, las patas, los reposabrazos y el hilo de la costura. En cada paso la cámara se acerca a la pieza que eliges y el precio se recalcula al momento. Al terminar, la silla da una vuelta y aparece con su etiqueta cosida, «diseñada por ti».

Lo hicimos para enseñar, con algo que se toca, lo que hace un configurador por una marca: que el cliente llegue sabiendo exactamente lo que quiere, y que la marca reciba esa petición ya cualificada.

Por qué paso a paso

Enseñar todas las opciones a la vez abruma: hay demasiado que decidir y la gente se va antes de terminar. Una decisión por pantalla hace que cada paso sea fácil y que el recorrido se sienta corto.

Y hay otro motivo: lo que montamos nosotros mismos lo valoramos más. Es el llamado efecto IKEA. Por eso el final no es un formulario, sino la silla terminada, con su número de serie y un nombre si quieres ponérselo. Cuando llega el momento de enviarla, ya es tuya.

Cómo se usa

  • Sigue los pasos con «Siguiente». El hilo de arriba se va cosiendo nudo a nudo con tu progreso.
  • Gira la silla arrastrando (en el móvil, con el dedo) para verla desde cualquier lado.
  • Al terminar, ponle nombre si quieres: aparece en su etiqueta.
  • Cambia cualquier pieza desde el resumen, sin empezar de nuevo.
  • Pulsa «Verla en tu salón» en el móvil para colocarla a tamaño real en tu espacio.
  • Envíanos la configuración o comparte tu silla con «Copiar enlace»: quien lo abra la verá ya terminada.

Paso de las patas: la cámara baja para enseñarlas y las tres opciones, cada una con su descripción

Qué explora

  • Modelado en código: la silla está construida con geometría paramétrica, con medidas reales en metros. Cambiar de patas o añadir reposabrazos no es cargar otro modelo: es la misma silla con otras piezas.
  • Materiales que se distinguen: la trama de la tela, el rizo del bouclé, el brillo del terciopelo y la veta de la madera se generan en código, sin descargar imágenes.
  • Cámara que acompaña: cada paso tiene su encuadre, y la distancia se ajusta a la forma de la pantalla para que la silla quepa igual en un móvil, una tablet o un monitor ancho.
  • AR con lo que has configurado: el servidor genera al momento el modelo 3D de tu silla, con sus texturas y a escala real, en los dos formatos que piden los móviles (glTF para Android y USDZ para iPhone).
  • Del clic al lead: «Enviar configuración» manda el pedido al estudio con cada opción, el precio, el nombre de la silla y el enlace para volver a abrirla.

La misma silla terminada en terciopelo salvia, nogal, patas de trineo, reposabrazos y costura azul

En el móvil

La silla queda arriba y cada paso debajo, con el precio y los botones siempre a mano. En horizontal, se colocan una al lado de la otra.

El configurador en el móvil: la silla arriba, el paso de las patas debajo y el precio y los botones abajo

El mismo sistema sirve para cualquier producto con variantes: muebles, iluminación, calzado, bicicletas, instalaciones deportivas o maquinaria.

¿Quieres algo así para tu marca?

Hablemos →

Más experimentos

Todos los experimentos