Tu primera escena 3D en Spline, de cero a tu web

Spline es un editor 3D que funciona en el navegador, pensado para diseñadores. Lo que en Blender llevaría días, aquí son minutos: modelas con formas básicas, añades luces y le das interacción sin escribir código. Después lo exportas y lo pegas en tu web.

1 · Crea la escena

1. 1

   Abre spline.design y crea un archivo nuevo

   Empieza desde una escena vacía o una plantilla de la comunidad para aprender cómo están hechas.
2. 2

   Añade formas con la barra superior

   Cubos, esferas, texto 3D… Usa pocas piezas bien iluminadas mejor que muchas: se ve más profesional y carga más rápido.
3. 3

   Elige materiales

   Prueba “Glass” para cristal, “Matcap” para un acabado limpio y barato de renderizar, o “Physical” si buscas realismo.
4. 4

   Ajusta la cámara

   Encuadra como si fuera una foto. Bloquea el zoom si no quieres que el usuario se pierda.

2 · Dale vida

1. 1

   Estados (States)

   Crea un segundo estado de un objeto (más grande, girado, de otro color). Spline anima entre ambos.
2. 2

   Eventos (Events)

   Conecta ese estado a un evento: Mouse Hover, Mouse Down o Look At (el objeto mira al cursor, muy efectivo).
3. 3

   Prueba en Play

   Pulsa el botón de reproducir y pasa el ratón. Si algo va lento aquí, en la web irá peor.

3 · Llévala a tu web

En Spline: Export → Code → React. Copia la URL que termina en scene.splinecode.

npm install @splinetool/react-spline @splinetool/runtime

import Spline from '@splinetool/react-spline';

export default function Hero() {
  return (
    <section style={{ position: 'relative', height: '100vh' }}>
      <Spline scene="https://prod.spline.design/TU-ESCENA/scene.splinecode" />
    </section>
  );
}

4 · Que no pese

• Carga la escena en diferido (React.lazy) para que no bloquee el resto de la página.
• Menos de 100.000 polígonos y texturas pequeñas: el archivo debería pesar menos de 2–3 MB.
• En móvil, valora mostrar una imagen o vídeo en su lugar: muchos teléfonos sufren con escenas grandes.
• Usa una sola escena por página.