Saltar al contenido
Cursos/Crea webs profesionales con IA desde cero/Añade 3D con Three.js solo cuando aporte valor

Añade 3D con Three.js solo cuando aporte valor

Crea una experiencia 3D opcional, accesible y ligera con alternativa estática y movimiento reducido.

Lección 28 de 47105 min Construcción profesional Codex + GPT-5.6 Sol

Resultado visible

Crearás una escena 3D aislada que explica o permite explorar algo. Tendrá imagen alternativa, controles accesibles, movimiento reducido y carga diferida.

Filtro antes de construir

El 3D aporta valor en producto espacial, recorrido, simulación o enseñanza de forma. No lo uses como fondo genérico para «parecer tecnológico». Define una tarea que el usuario hará mejor y un presupuesto de peso, CPU y batería.

Prompt

Evalúa si Three.js mejora esta tarea: [TAREA]. Compara con vídeo, secuencia
de imágenes e ilustración. Si gana 3D, crea un prototipo aislado y lazy-loaded
con presupuesto [PESO/RENDIMIENTO]. Incluye imagen fallback, descripción,
controles por teclado, botón pausar, prefers-reduced-motion, limpieza de
recursos y manejo de WebGL no disponible. No lo cargues en la ruta crítica.
Mide antes/después y elimina la escena si no cumple aceptación.

Prueba

Comprueba móvil modesto, orientación, pestaña en segundo plano, navegación repetida y ausencia de WebGL. La página debe seguir comunicando el contenido sin la escena.

Fuentes oficiales