Guía · Spline
Cómo incrustar una escena de Spline sin iframe
Publicas tu escena en Spline, copias el <iframe> que te da y
funciona. Ese iframe carga la escena desde un servidor externo y depende de que
su enlace público siga disponible. La presencia del logo depende de las opciones
de exportación y de tu plan de Spline.
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.
Este flujo aloja el archivo de la escena, pero conserva un runtime externo. No equivale a la exportación Self-Hosted de Spline, que incluye el runtime y los assets y está disponible en Enterprise. Antes de reutilizar una exportación, comprueba las opciones y condiciones vigentes de tu cuenta.
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
- Publica la escena con Export → Public URL. Ya sabes por qué: es lo que la deja lista para la web.
-
Abre esa URL pública y mira el código fuente de la página
(
Ctrl+U). Buscaapp.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. -
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(); - Puedes servir y cachear el archivo desde tu dominio, respetando su licencia y las condiciones de exportación. El runtime y los posibles assets externos conservan sus propias dependencias.
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, pero el encuadre también depende de la cámara. 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. La documentación recomienda Auto para usar WebGPU cuando está disponible y volver a WebGL en otros navegadores. WebGPU exclusivo puede dejar fuera a parte del público. Si eliges WebGL, comprueba que el dispositivo lo soporte; ninguna opción garantiza compatibilidad universal. Consulta las opciones del renderer.
Prueba la escena en más de un navegador y en un móvil real. Comprueba que el objeto aparece, responde a los controles y no impide desplazar la página. Revisa los errores de consola y ofrece una imagen alternativa si falla WebGL. Contar colores de una captura no permite confirmar por sí solo que la escena funciona.
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»?
No automáticamente. Spline permite quitar su logo en Public URLs, Viewer y Code Exports con los planes Hobby, Pro o Max. Usa la opción de Play Settings que corresponda a tu plan; montar un canvas propio no sustituye esas condiciones. Consulta las opciones oficiales de Play Settings.
¿La escena se sigue viendo bien en móvil?
El resultado depende de la cámara, la composición y la proporción del contenedor. Prueba el encuadre en varios anchos y en un móvil real; usar el runtime no garantiza que cualquier escena se adapte sin ajustes.
¿Deja de depender de Spline por completo?
No, y conviene tenerlo claro. Puedes servir el archivo publicado desde tu dominio si su licencia y las condiciones de exportación lo permiten, 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.
