Para crear una web de producto con despiece 3D usando IA, necesitas que el objeto se separe en grupos y vuelva a montarse al mover un control o hacer scroll. No hace falta empezar por una escena vacía: aquí tienes una cámara, unos auriculares y una cafetera que puedes abrir, probar y adaptar.
En esta guía te enseño el camino más sencillo con los archivos del ejemplo, los botones reales y las comprobaciones de cada fase. El resultado es una presentación interactiva para explicar un producto; no es por sí solo una tienda con carrito o pagos.
Los prompts completos están en las tarjetas del final, listos para copiar. Guarda también el PDF si prefieres seguir los pasos con el proceso a mano.
Mira primero el resultado y prueba los controles
El vídeo presenta el resultado. En la demo, elige Cámara, Auriculares o Cafetera moka y mueve Desliza y descubre. A la izquierda ves el objeto montado; al llegar al 100 % aparecen sus grupos separados. Ensamblar lo devuelve al inicio.
Qué necesitas antes de empezar
- Un ordenador y un navegador actualizado para editar y revisar el proyecto.
- El ZIP de esta guía, extraído por completo en una carpeta.
- Un asistente de programación que pueda abrir esa carpeta y ejecutar un servidor local. Puedes usar el que ya tengas; las funciones de ejecución dependen de su plan y permisos.
- Si vas a adaptar un producto real, fotografías propias o autorizadas y una lista fiable de sus piezas. Una foto exterior no revela la ingeniería interior.
Un servidor local es un programa que muestra los archivos de tu carpeta en una dirección de tu ordenador, normalmente http://127.0.0.1:puerto/. No publica tu web en Internet. Este ejemplo usa módulos JavaScript, por eso conviene abrirlo por esa dirección y no con doble clic.
Cómo crear tu web con despiece 3D, paso a paso
Paso 1. Descarga y extrae el proyecto completo
- Pulsa Descargar el proyecto, en esta guía.
- En Windows, abre Descargas, pulsa el ZIP con el botón derecho y elige Extraer todo. En macOS, abre el ZIP para descomprimirlo.
- Entra en la carpeta
despiece. Debes verindex.html,app.js,camera.js,products.js,style.css,assetsyvendor.
Comprueba: no has sacado solo el HTML del ZIP. Las carpetas de imágenes, tipografía y Three.js tienen que permanecer junto a los archivos.
Paso 2. Abre esa carpeta con tu asistente
En tu editor o app de programación, usa la opción para abrir una carpeta o proyecto y selecciona despiece, no Descargas entera. El nombre exacto del menú depende del editor. La tarjeta Prompt de arranque · Despiece, al final del artículo, sirve para pedir que revise los archivos, arranque el servidor y te indique la URL local.
Abre la dirección que te devuelva. Debe aparecer Cada pieza cuenta y los tres botones de producto. Si ves una lista de archivos, entra en index.html desde esa misma dirección. Si aparece una página vacía, conserva el mensaje de error y pídele al asistente que lo revise antes de modificar el diseño.
Paso 3. Prueba el movimiento antes de personalizar
- Selecciona Cámara y mueve la barra a 0, 50 y 100 %.
- Pulsa Ensamblar: el control vuelve a 0 y las piezas se unen.
- Pulsa Ver demostración. Cambia a Detener demo mientras se reproduce la secuencia de los tres productos.
- Selecciona después los auriculares y la cafetera, y repite la apertura y el cierre.
Comprueba: no hay piezas fuera del encuadre ni saltos al regresar. El scroll y la barra comparten el progreso; no son dos animaciones independientes.
Paso 4. Adapta un producto y pide cambios concretos
Elige primero un solo objeto. Adjunta sus referencias y usa la tarjeta Prompt de adaptación · Despiece. Describe qué partes deben separarse y por qué. Por ejemplo, en una lámpara puedes distinguir base, soporte y pantalla; en una botella, cuerpo, tapón y junta.
| Archivo | Qué puedes cambiar |
|---|---|
| index.html | Título, explicación y nombres de los controles. |
| style.css | Colores, tipografía y distribución de la página. |
| camera.js | Piezas y materiales de la cámara del ejemplo. |
| products.js | Geometría y materiales de auriculares y cafetera. |
| app.js y timeline.js | Controles, encuadre, demostración y grabación. |
Pide un cambio verificable cada vez: material de una pieza, texto de una sección o dirección de apertura de un grupo. Guarda una copia antes. Un nombre de producto diferente no transforma por sí solo la geometría en otro modelo.
Paso 5. Comprueba móvil y graba un ejemplo si lo necesitas
Revisa la demo en una ventana estrecha: los botones y la barra deben seguir accesibles. Para probarla en un móvil real, publica una copia o pide al asistente una dirección de prueba accesible desde ese dispositivo: 127.0.0.1 en el teléfono apunta al propio teléfono, no al ordenador.
Grabar demo crea una captura local del recorrido de los tres productos. El navegador decide si descarga MP4 o WebM. Abre el archivo recibido y comprueba los cambios de objeto y el cierre de la secuencia. La grabación de esta plantilla es sin audio; cambiar la extensión del archivo no lo convierte en otro formato.
Paso 6. Publica una copia para enseñarla en tu web
Sube los archivos de la demo a un alojamiento estático o entrégaselos a quien mantiene tu web. Conserva la estructura de carpetas y abre su URL pública por HTTPS. Si quieres insertarla en WordPress, suele ser más sencillo alojarla aparte e incrustarla en un bloque HTML personalizado mediante un iframe, cuando el editor y los permisos de tu sitio lo permitan. Una URL local o un ZIP descargado no son una web publicada.
Errores habituales y cómo resolverlos
| Problema | Qué revisar |
|---|---|
| Página vacía al hacer doble clic | Abre la URL del servidor local; comprueba rutas y módulos en vendor. |
| El diseño no coincide con tu producto | Aporta referencias y piezas reales; no pidas al modelo que deduzca un interior desconocido. |
| Se ven piezas cortadas | Ajusta el encuadre y la distancia del despiece antes de escalar todo el objeto. |
| No funciona en el móvil | Usa una URL accesible desde el teléfono y prueba controles táctiles. |
| El vídeo no tiene música | Esta grabación es muda: añade audio después en un editor si lo necesitas. |
Qué puedes hacer después
Para crear una landing más amplia, continúa con la guía para crear una web 3D con IA. Si necesitas una ficha con fotografías, vídeo y modelo interactivo, tienes el tutorial de ficha de producto en tres formatos. La base técnica del ejemplo es Three.js.
¿Quieres los prompts exactos para crear tu despiece?
Debajo tienes las tarjetas de arranque, construcción y adaptación. Copia la de la fase en la que estás y adjunta tus referencias cuando corresponda. Puedes guardar más recursos en la biblioteca de prompts.
