Guía · Spline

Cómo incrustar una escena de Spline sin iframe

28 de agosto de 2026 · Spline · 6 min de lectura

Publicas tu escena en Spline, copias el <iframe> que te da y funciona. Pero ese iframe trae tres cosas que quizá no quieres: una petición a un servidor ajeno en cada visita, la marca «Built with Spline» encima de tu escena, y la dependencia de que ese enlace público siga vivo dentro de dos años.

Hay otra vía, y es más sencilla de lo que parece: el archivo lo sirves tú desde tu propio dominio, y de Spline solo llega el programa que lo dibuja. No es teoría — es exactamente lo que mueve la escena 3D de la portada de este sitio.

Por qué el archivo del ZIP todavía no te sirve

Este es el punto donde casi todo el mundo se atasca, así que va primero. El .spline que descargas de un pack, o el que exportas desde el editor, es el proyecto de trabajo: lleva el historial, las capas y todo lo que necesita el editor para seguir editándolo. El runtime no sabe leer eso.

El paso de Export → Public URL es el que convierte ese proyecto en algo que un navegador puede dibujar: comprime la geometría, resuelve los materiales y deja un binario compacto. Así que sí, hay que publicar la escena aunque después no vayas a usar la URL pública para nada más que sacar el archivo de ahí.

Los cuatro pasos

1. Publica la escena con Export → Public URL. Ya sabes por qué: es lo que la deja lista para la web.
2. Abre esa URL pública y mira el código fuente de la página (Ctrl+U). Busca app.start([: detrás hay una lista larguísima de números. Esa lista es tu escena. Spline no descarga ningún archivo aparte — la lleva incrustada ahí dentro.
3. Guárdala como archivo binario. En la consola del navegador, sobre esa misma página:

   const bytes = new Uint8Array(/* pega aquí la lista de números */);
   const a = document.createElement('a');
   a.href = URL.createObjectURL(new Blob([bytes]));
   a.download = 'escena.spline';
   a.click();

4. Sube ese archivo a tu servidor, junto al resto de tus recursos. A partir de aquí es tuyo: se cachea como cualquier otro archivo y no depende de nadie.

El código, completo

Un <canvas>, el runtime desde la CDN de Spline y tres líneas para arrancarlo. Esto es todo:

<div style="position:relative;aspect-ratio:16/9">
  <canvas id="escena" style="width:100%;height:100%;display:block"></canvas>
</div>

<script type="module">
  const { Application } = await import(
    'https://cdn.spline.design/@splinetool/runtime@2.0.8/build/runtime.js'
  );
  const app = new Application(document.getElementById('escena'), {
    htmlContentMode: 'inline'
  });
  const datos = await fetch('/ruta/a/tu/escena.spline');
  await app.start(new Uint8Array(await datos.arrayBuffer()));
</script>

El runtime pesa unos 124 KB (35 KB comprimido). Cárgalo siempre desde la CDN de Spline y no lo copies a tu servidor: no declara licencia en su paquete de npm, así que servirlo tú te mete en un terreno que no hace falta pisar.

Tres tropiezos que te ahorran la tarde

La escena sale cortada por arriba y por abajo. El runtime reencaja la escena al tamaño de tu canvas, así que aquí no sufres el recorte de la cámara ortográfica que sí tiene el iframe — está comprobado de 1160 a 340 píxeles de ancho sin un solo desborde. Pero si la escena está compuesta en una proporción (3:2, por ejemplo) y tu contenedor es otra (16:9), el recorte vertical vuelve. Se arregla cambiando la proporción del contenedor, o bajando el zoom de la cámara en el editor hasta que quepa entera.

La rueda del ratón sobre la escena no hace bajar la página. Los controles de órbita se están quedando el scroll. Desactiva Zoom en Export → Play Settings antes de publicar. Es un fallo de usabilidad serio y pasa desapercibido si pruebas la página solo con la barra lateral.

La escena no aparece en algunos navegadores. Mira el Renderer, también en Export → Play Settings. Si está en «WebGPU Only», cualquier navegador sin WebGPU se queda sin escena — y no lo notas, porque el tuyo seguramente sí lo tiene. Ponlo en «WebGL 2 Only»: funciona en todos y además el paquete que se descarga es más pequeño.

Para comprobarlo de verdad, no basta con mirarlo en tu Chrome. Renderiza la página sin GPU y cuenta los colores distintos de la captura: una escena rota da unos 40-120 colores (es el fondo plano), y una sana, varios miles.

Cuándo no merece la pena

Este método no es siempre la mejor opción, y conviene decirlo. Si vas a poner una escena suelta en una landing que montaste en Webflow o Framer, el iframe se pega en treinta segundos y no tienes que tocar código ni subir archivos. La diferencia empieza a importar cuando la escena es parte estable de tu sitio: una portada, una cabecera, algo que va a estar ahí durante años y que no quieres que dependa de un enlace ajeno.

Y sigue habiendo una dependencia real: el programa que dibuja la escena es de Spline y se descarga de su CDN en cada visita. Esto te libera de su visor, no de su tecnología.

Preguntas frecuentes

¿Puedo usar el archivo .spline que viene en el ZIP directamente en mi web?

No, todavía no. El archivo que sale del editor o de un ZIP es el proyecto de trabajo. El paso de Export → Public URL es el que prepara la escena para la web: comprime la geometría, resuelve los materiales y deja el binario que el runtime sabe leer. Publica primero y saca el archivo de esa página publicada.

¿Esto elimina la marca «Built with Spline»?

Sí, porque esa marca la dibuja el visor de my.spline.design, no la escena. Al montar tú el <canvas> con el runtime, el visor no interviene y la marca no aparece. Ahora bien, si las condiciones de tu plan de Spline te piden atribución visible, sigues obligado a ponerla por tu cuenta: quitar el visor no cambia lo que firmaste.

¿La escena se sigue viendo bien en móvil?

Mejor que con el iframe. El visor usa cámara ortográfica, así que un contenedor estrecho no encoge la escena sino que la recorta, y en pantallas pequeñas puede quedarse casi vacía. El runtime en cambio reencaja la escena al tamaño del canvas: verificado de 1160 a 340 píxeles de ancho sin desbordes.

¿Deja de depender de Spline por completo?

No, y conviene tenerlo claro. El archivo de la escena pasa a ser tuyo y lo sirves desde tu dominio, pero el programa que la dibuja sigue siendo de Spline y se descarga de su CDN en cada visita. Esto te libera del visor, no de la tecnología. Lo que sí ganas es que tu escena no desaparece si un enlace público deja de funcionar.