# Spline 网页版：嵌入和导出交互式 3D (https://spline.design/zh/web)

> 使用 Spline Viewer Web 组件嵌入交互式 3D，或将场景导出为 Vanilla JS、React、Next.js、Three.js 或 react-three-fiber 代码。

# 交互式 3D， 为网页而生

用一个 HTML 标签嵌入你的 3D 场景，或将其导出为**Vanilla JS、React、Next.js 和 Three.js** 代码。

[开始创作](https://app.spline.design/signin)[阅读文档](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)

your-website.com

Spline Viewer

## 一个标签，适用任何网站

`<spline-viewer>` 是一个原生 Web 组件，因此可以在 Framer、Webflow、Squarespace、React、Svelte 和纯 HTML 中使用。它能感知整个页面，而不仅仅是自己的画布：场景可以跟随光标、注视光标，并随页面滚动播放动画。

[了解更多：Spline Viewer](https://docs.spline.design/exporting-your-scene/web/exporting-as-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 中打开，或下载文件自行托管。

[了解更多：代码导出](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

网页端的更多能力

## 从一个链接到你自己的服务器

### Code API

在你自己的代码中触发事件、更新变量、修改对象属性，支持 Vanilla JS、React 和 Next.js。

### 公开链接

以链接形式分享场景，或嵌入 Notion、Webflow、WordPress 等平台。

### 自托管

下载包含运行时在内的整个项目，并部署在你自己的服务器上。适用于 Enterprise 套餐。

### WebGPU

场景使用 WebGPU 渲染，在不支持 WebGPU 的环境中会自动回退到 WebGL。

## 开始用 3D 创作

连接你的智能体，邀请你的团队，今天就发布你的第一个 3D 场景。

[开始创作](https://app.spline.design/signin)[连接你的智能体](https://spline.design/zh/mcp)

[Spline](https://spline.design/zh)

面向团队及其智能体的 3D 和 2D 编辑器。一键发布到网页、iOS 和 Android。

#### 向 AI 询问 Spline

#### 产品

- [3D 设计](https://spline.design/zh/3d-design)
- [Hana](https://spline.design/zh/hana)
- [Omma](https://omma.build)
- [AI 3D 生成](https://spline.design/zh/ai-generate)
- [Spline MCP](https://spline.design/zh/mcp)
- [Spline Arena](https://spline.design/zh/arena)
- [定价](https://spline.design/zh/pricing)
- [企业版](https://spline.design/zh/enterprise)

#### 运行时

- [Web](https://spline.design/zh/web)
- [iOS](https://spline.design/zh/ios)
- [Android](https://spline.design/zh/android)

#### 应用

- [下载](https://spline.design/zh/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [下载 Spline Mirror](https://spline.design/download-mirror)

#### 学习

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/zh/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [解决方案](https://spline.design/solutions)

#### 社区

- [Spline 社区](https://community.spline.design)
- [Blog](https://spline.design/zh/blog)
- [更新日志](https://spline.design/zh/changelog)
- [教育](https://spline.design/zh/education)
- [Contra](https://spline.design/contra)
- [联盟计划](https://spline.design/zh/affiliate)

#### 公司

- [客户](https://spline.design/zh/customers)
- [招贤纳士](https://www.ycombinator.com/companies/spline/jobs)
- [安全](https://spline.design/zh/security)

#### 法律

- [条款与条件](https://spline.design/terms)
- [隐私](https://spline.design/privacy)

#### 联系我们

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.