--- title: "Demo de configurador 3D de productos: pruébalo en vivo" description: "Prueba un configurador 3D de productos en el navegador: cambia las medidas, la madera y el color de un estante y mira el modelo, las piezas y el precio." url: "https://dardo.studio/es/herramientas/demo-configurador-3d/" language: "es" translations: {"en":"https://dardo.studio/en/tools/3d-product-configurator-demo/","pt":"https://dardo.studio/pt/ferramentas/demo-configurador-3d/"} updated: "2026-11-08T12:00:00Z" --- Herramientas gratuitas # Demo de configurador 3D Este es un configurador 3D de productos que funciona de verdad, hecho por Dardo con un estante modular ficticio para poder mostrarlo en público. Elige el ancho, el alto, la madera y el color de la estructura: el modelo 3D, las medidas, la lista de piezas y un precio de ejemplo cambian con cada elección, y un enlace vuelve a abrir exactamente el estante que armaste. Por [Nicolás Cerón](https://dardo.studio/es/nicolas-ceron/) · Actualizado 8 nov 2026 · 6 min de lectura [Pedir una propuesta](https://dardo.studio/es/contacto/?service=3d-product-configurator) ![El estante de demostración en 3D: dos módulos de repisas de roble natural sobre una estructura de acero grafito, con cuatro cajones abajo](https://dardo.studio/work/product-configurator-poster.webp)Vista 3D. Estante de 162 cm de ancho y 121 cm de alto. Repisas: Roble natural. Estructura: Grafito. Fila inferior: Cajones. Arrástralo para girarlo, o usa las flechas del teclado. Arrastra para girarlo **Campos del formulario** - 82 cm1 módulo - 162 cm2 módulos - 242 cm3 módulos - 322 cm4 módulos - 83 cm3 repisas - 121 cm4 repisas - 160 cm5 repisas - 198 cm6 repisas - Roble natural - Roble ahumado - Nogal - Fresno negro - Grafito - Blanco tiza - Rojo óxido - Salvia - Cobalto - Abierta - Puertas - Cajones ## Tu estante Medidas (ancho × alto × fondo) 162 × 121 × 38 cm Precio de ejemplo US$ 950 Código de configuración SHELF-2X4-OAK-GRAPHITE-DRAWERS Un producto ficticio con una lista de precios ficticia: muestra cómo el precio puede seguir cada elección. Tu configurador usaría tus propios precios, reglas e inventario. ### Lista de piezas Postes de acero 6 Travesaños 12 Repisas 8 Cajones 4 Niveladores 6 ### ¿Quieres uno para tu producto? Envíanos esta configuración con unas líneas sobre lo que vendes y lo que eligen tus clientes. Te contamos cómo construiríamos el tuyo: opciones y reglas, modelos 3D, dónde se conecta con tu tienda o tus cotizaciones, y cuánto costaría. ## Puntos clave - Un solo modelo 3D puede mostrar todas las versiones de un producto: este estante tiene 960. - Las medidas, la lista de piezas y el precio salen de las mismas reglas que construyen el modelo, así que nunca contradicen la imagen. - La demo no descarga archivos 3D: el estante se construye en el navegador a partir de sus medidas. - Todo funciona con teclado, con movimiento reducido y sin la vista 3D. - Cada configuración se exporta en glTF (.glb) y, en dispositivos Apple, en USDZ para realidad aumentada. ## 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](https://dardo.studio/es/servicios/configurador-3d-de-productos/). ## Preguntas antes de elegir **¿El estante es un producto real?** No. Es un estante ficticio que Dardo diseñó para esta demo, con precios y códigos inventados, para mostrar en público un configurador que funciona sin usar el producto de un cliente. El método es el mismo que usaríamos con un catálogo real: opciones, reglas, una lista de piezas y un precio que siguen cada elección. **¿Un configurador así funciona en Shopify?** Sí. Shopify muestra modelos 3D en las fichas de producto en todos sus planes, y un configurador a medida puede agregar las opciones elegidas a la línea del carrito como propiedades, que llegan al pedido. Esas propiedades no cambian el precio, así que las opciones que sí lo cambian necesitan una variante por precio o, en Shopify Plus, una función Cart Transform. **¿Qué necesitan de nosotros para hacer uno de nuestro producto?** La lista de productos y opciones, las reglas entre ellas, de dónde salen los precios y los archivos 3D o CAD, planos, fotos y muestras de material que existan. Un taller convierte eso en un mapa de opciones y reglas antes de modelar, y una primera parte lo prueba con una familia de productos. **¿Un configurador 3D hace más lenta una ficha de producto?** No debería. Aquí el contenido y las opciones llegan en el HTML, el código 3D carga después y solo cuando la vista está en pantalla, y la vista solo dibuja cuando algo cambia. Un producto real suma modelos comprimidos, así que acordamos un presupuesto de peso por producto y probamos en un celular antes del lanzamiento. **¿Puedo ver el estante en mi espacio?** En un iPhone o iPad, sí: el botón de RA convierte tu configuración en un archivo USDZ que abre AR Quick Look. Scene Viewer de Android abre archivos glTF desde una dirección web, así que un configurador en producción generaría y publicaría el archivo de cada configuración; esta demo ofrece en su lugar la descarga en .glb. ## Fuentes y lecturas Fuentes de esta página, con más detalles de sus publicaciones originales. - [three.js documentation: GLTFExporter and USDZExporter](https://threejs.org/docs/pages/USDZExporter.html) · threejs.org - [Khronos: glTF, the royalty-free format for 3D scenes and models](https://www.khronos.org/gltf/) · khronos.org - [Apple Developer: Quick Look gallery (USDZ in AR)](https://developer.apple.com/quick-look-gallery/) · developer.apple.com - [Google ARCore: Scene Viewer for the web](https://developers.google.com/ar/develop/scene-viewer) · developers.google.com - [Shopify Dev: Cart API reference (line item properties)](https://shopify.dev/docs/api/ajax/reference/cart) · shopify.dev - [Shopify Dev: Cart Transform Function API](https://shopify.dev/docs/api/functions/latest/cart-transform) · shopify.dev - [W3C: Understanding WCAG 2.2, Success Criterion 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) · w3.org [Dardo](https://dardo.studio/es/) · [Herramientas gratuitas](https://dardo.studio/es/herramientas/) · Demo de configurador 3D ## De la demo a tu configurador La demo muestra el método. Un configurador real empieza por tu producto, tus reglas y a dónde tiene que llegar cada pedido o cotización. [01 · **Configuradores 3D de productos** · Qué hacemos, cómo y cuánto cuesta](https://dardo.studio/es/servicios/configurador-3d-de-productos/) · [02 · **Sitios web 3D interactivos** · Escenas 3D que cuentan tu historia](https://dardo.studio/es/servicios/sitios-web-3d-interactivos/) · [03 · **Habla con Dardo** · Envía tu producto y sus opciones](https://dardo.studio/es/contacto/?service=3d-product-configurator) ## Sigue explorando. - [Servicio · **Configuradores 3D de productos**](https://dardo.studio/es/servicios/configurador-3d-de-productos/) - [Servicio · **Páginas web 3D interactivas con Three.js y WebGL**](https://dardo.studio/es/servicios/sitios-web-3d-interactivos/) - [Servicio · **Desarrollo web para Estados Unidos y Latinoamérica**](https://dardo.studio/es/servicios/desarrollo-web/)