互動式 3D, 為網頁而生

只要一個 HTML 標籤就能嵌入你的 3D 場景,或匯出成適用於Vanilla JS、React、Next.js 和 Three.js 的程式碼。

your-website.com
Spline Viewer

一個標籤,適用任何網站

<spline-viewer> 是原生網頁元件,因此在 Framer、Webflow、Squarespace、React、Svelte 和純 HTML 中都能使用。它能感知整個頁面,而不只是自己的畫布:場景可以跟隨游標、注視游標,並隨頁面捲動播放動畫。

深入了解Spline Viewer
main.js
import { 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');
程式碼匯出

你的 3D 場景,化為程式碼

匯出為 Vanilla JS、React、Next.js、Three.js 或 react-three-fiber。複製程式碼、在 CodeSandbox 中開啟,或下載檔案自行託管。

深入了解程式碼匯出
網頁上的更多功能

從一個連結,到你自己的伺服器

程式碼 API

在 Vanilla JS、React 和 Next.js 中,從你自己的程式碼觸發事件、更新變數並變更物件屬性。

公開 URL

以連結分享場景,或嵌入 Notion、Webflow、WordPress 等平台。

自行託管

下載完整專案(包含 runtime),從你自己的伺服器提供服務。適用於 Enterprise 方案。

WebGPU

場景以 WebGPU 渲染,在不支援的環境中會自動改用 WebGL。

開始打造 3D

連接你的 AI 代理、邀請你的團隊,今天就發布你的第一個 3D 場景。