HTMLタグひとつで3Dシーンを埋め込むことも、Vanilla JS、React、Next.js、Three.jsのコードとしてエクスポートすることもできます。
<spline-viewer>はネイティブのWebコンポーネントなので、Framer、Webflow、Squarespace、React、Svelte、素のHTMLのどれでも動きます。キャンバスの中だけでなくページ全体を認識するため、シーンがカーソルを追いかけたり、見つめたり、スクロールに合わせてアニメーションしたりできます。
Splineimport { Application } from '@splinetool/runtime';
// Render the scene on a canvas
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);
app.load('https://prod.spline.design/DGI6oWLNcrhyDwvi/scene.splinecode');
Vanilla JS、React、Next.js、Three.js、react-three-fiberとしてエクスポート。コードをコピーしても、CodeSandboxで開いても、ファイルをダウンロードしてセルフホストしてもかまいません。
詳しく見る（コードエクスポートについて）Vanilla JS、React、Next.jsの自分のコードから、イベントの発火、変数の更新、オブジェクトのプロパティ変更ができます。
シーンをリンクで共有したり、Notion、Webflow、WordPressなどに埋め込んだりできます。
ランタイムを含むプロジェクト一式をダウンロードし、自社サーバーから配信できます。Enterpriseプランで利用可能です。
シーンはWebGPUでレンダリングされ、使えない環境では自動的にWebGLに切り替わります。