Spline hat kürzlich eine leistungsstarke Funktion eingeführt: den Export deiner 3D-Szenen als selbst gehostete Pakete. Damit hast du volle Kontrolle darüber, wie und wo deine Spline-Szenen gehostet werden – ideal für individuelle Webseitenprojekte mit besserer Performance, CDN-Geschwindigkeit und Unabhängigkeit von Drittanbietern.

In diesem Tutorial zeige ich dir Schritt für Schritt, wie du eine Spline-Szene als selbst gehostetes Paket exportierst, die Dateien bei BunnyCDN hochlädst und die Szene mithilfe eines <canvas>-Elements und der Spline-Runtime in Webflow einbettest.

Auch wenn dieses Tutorial BunnyCDN als Hosting-Plattform verwendet, kannst du jeden beliebigen statischen Filehost nutzen, der CORS-Header und korrekte MIME-Typen unterstützt. Alternativen sind zum Beispiel Cloudflare R2, AWS S3, Netlify, Vercel oder dein eigener Server. BunnyCDN wird hier vorgestellt, da es besonders schnell, günstig und einfach zu bedienen ist.

Schritt 1: Szene aus Spline exportieren

1. Öffne deine Spline-Szene.
2. Klicke oben rechts auf Exportieren.
3. Wähle Vanilla JS als Exporttyp (nicht React oder Next.js).
4. Klicke auf Self Hosted ZIP herunterladen.
5. Entpacke das Archiv lokal auf deinem Rechner.

Du solltest folgende Dateien sehen:

• scene.splinecode
• process.js
• process.wasm
• runtime.js
• (optional) physics.js und opentype.js

Schritt 2: Dateien bei BunnyCDN hochladen

1. Melde dich in deinem Bunny.net-Dashboard an.
2. Öffne deine Pull Zone oder erstelle eine neue.
3. Lade alle Dateien aus dem ZIP in einen Ordner hoch, z. B.:

https://dein-cdn.b-cdn.net/spline-szene/

3. Stelle sicher, dass diese Dateien öffentlich aufrufbar sind:
   • runtime.js
   • scene.splinecode
   • process.wasm
   • process.js
   • (optional) opentype.js
   • (optional) physics.js
4. Gehe im Bunny-Dashboard zu Caching & Delivery > Request Settings > Add CORS Headers:
   • Datei-Endungen: js, wasm, splinecode
   • Header: Access-Control-Allow-Origin, Wert: *
5. Leere optional den Cache für den Ordner, um sicherzustellen, dass die neuen Dateien sofort ausgeliefert werden.

Schritt 3: Szene in Webflow einbetten

1. Ziehe in Webflow ein Embed-Element an die gewünschte Stelle auf deiner Seite.
2. Füge folgenden Code ein und ersetze die URLs durch die Pfade zu deinem BunnyCDN-Ordner:

<canvas id="spline-container" style="width:100%; height:600px;"></canvas>

<script type="module">
 import { Application } from 'https://dein-cdn.b-cdn.net/spline-szene/runtime.js';

 const canvas = document.getElementById('spline-container');

 const app = new Application(canvas, {
   wasmPath: 'https://dein-cdn.b-cdn.net/spline-szene/'
 });

 app.load('https://dein-cdn.b-cdn.net/spline-szene/scene.splinecode')
   .then(() => console.log('Szene geladen'))
   .catch((err) => console.error('Ladefehler', err));
</script>

⚠️ Häufige Fehlerquellen

• Achte darauf, dass du beim Export Vanilla JS ausgewählt hast.
• Alle Runtime-Dateien müssen aus demselben Export-Paket stammen.
• Vergewissere dich, dass die CORS-Header und MIME-Typen bei Bunny korrekt gesetzt sind.
• Der Webflow-Vorschaumodus lädt keine externen Skripte – veröffentliche deine Seite zum Testen.

✅ Geschafft!

Wenn alles korrekt eingerichtet ist, sollte deine Spline-Szene jetzt direkt und performant in deiner Webflow-Seite angezeigt werden. Du profitierst von mehr Flexibilität, schnellen Ladezeiten und voller Kontrolle über deine Assets.

Falls etwas nicht funktioniert, prüfe die Konsole deines Browsers auf Fehlermeldungen und stelle sicher, dass alle URLs korrekt und öffentlich erreichbar sind.

Halte Ausschau nach zukünftigen Updates von Spline – neue Exportformate und Runtime-Verbesserungen machen das Self-Hosting noch einfacher.