Demo de configurador 3D

Cómo usar la demo

1. Elige las medidas: cuatro anchos, de uno a cuatro módulos, y cuatro altos, de tres a seis repisas.
2. Elige los acabados: cuatro maderas para repisas y frentes, cinco colores de pintura electrostática para la estructura de acero y repisas abiertas, puertas o cajones en la fila inferior.
3. Gíralo: arrastra el modelo, usa los botones de abajo, o selecciónalo con el teclado y usa las flechas. Frente, Ángulo y Lado saltan a vistas fijas.
4. Guárdalo: copia el enlace para volver al mismo estante, descarga el modelo en un archivo .glb o, en un iPhone o iPad, míralo en tu espacio con AR Quick Look.
5. Envíalo: el último botón lleva tu configuración a nuestro formulario de contacto, donde agregas unas líneas sobre tu propio producto.

Qué hace un configurador por el comprador

Un configurador reemplaza la galería de cada producto posible por un solo modelo que sigue las elecciones del comprador. Aquí, 4 anchos × 4 altos × 4 maderas × 5 colores × 3 tipos de frente dan 960 versiones de un mismo estante, sin fotografiar ni renderizar ninguna por adelantado.

• Reglas: cada elección cambia las piezas que necesita el estante, así que el modelo y la lista de piezas siempre coinciden.
• Una lista de piezas: los postes, travesaños, repisas y frentes que llevaría una cotización o una orden de fabricación.
• Un precio que sigue la elección: aquí sale de una lista ficticia; en un proyecto real, de tu lista de precios, tu ERP o tu CPQ.
• Un código de configuración y un enlace, para que un vendedor, una cotización o una línea del carrito lleven la configuración exacta.

Cómo está hecho

El estante no es un archivo 3D descargado. Se construye en el navegador a partir de sus propias medidas: cada poste, travesaño, repisa y frente de cajón es una caja ubicada con las mismas reglas que cuentan las piezas y les ponen precio, así que la imagen y la lista de piezas no se pueden contradecir. La veta de la madera también se dibuja en el navegador, así que la vista 3D no descarga modelos ni texturas. Funciona con three.js y WebGL y solo dibuja un cuadro nuevo cuando algo cambia.

Para un producto real solemos partir de tus archivos CAD o de modelos 3D existentes, los convertimos a glTF, el formato abierto que mantiene el Khronos Group para el 3D en la web, y comprimimos la geometría y las texturas para el celular. El mismo modelo se exporta luego a USDZ para AR Quick Look de Apple, como hace aquí el estante.

Accesibilidad y presupuesto de rendimiento

• Cada opción es un control de formulario estándar, así que todo el configurador funciona con teclado y con lector de pantalla, y cada cambio se anuncia.
• Girar el modelo nunca exige arrastrar: los botones y las flechas del teclado hacen lo mismo, como pide el criterio de WCAG 2.2 sobre movimientos de arrastre.
• Si reduces el movimiento en tu sistema, la cámara salta a cada vista en lugar de deslizarse.
• Las medidas, la lista de piezas y el precio están en el HTML de la página y funcionan sin la vista 3D. Sin WebGL ves una imagen fija; con el ahorro de datos activado, la vista 3D espera a que la pidas.
• El código de la vista 3D, con three.js incluido, pesa unos 160 KB comprimido y solo carga cuando la vista aparece en pantalla. Los exportadores de .glb y de RA suman unos 10 KB cada uno, solo si los usas.

Lo que esta demo deja por fuera

Es una demo, no un proyecto de un cliente: el producto, sus precios y su código son inventados, y nada de esto se fabricó. Un configurador real necesita además lo que este simula: las reglas y excepciones reales de tu producto, tu lista de precios, el inventario y los tiempos de entrega, y la conexión con el carrito, la cotización o el pedido. Ese es el trabajo que cubre nuestro servicio de configuradores 3D de productos.

Preguntas antes de elegir