# Spline untuk Web: benamkan dan eksport 3D interaktif (https://spline.design/ms/web)

> Benamkan 3D interaktif dengan komponen web Spline Viewer, atau eksport adegan anda sebagai kod Vanilla JS, React, Next.js, Three.js atau react-three-fiber.

# 3D interaktif, dibina untuk web

Benamkan adegan 3D anda dengan satu tag HTML, atau eksportnya sebagai kod untuk **Vanilla JS, React, Next.js dan Three.js**.

[Mula membina](https://app.spline.design/signin)[Baca dokumentasi](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)

laman-web-anda.com

Spline Viewer

## Satu tag, mana-mana laman web

`<spline-viewer>` ialah komponen web natif, jadi ia berfungsi dalam Framer, Webflow, Squarespace, React, Svelte dan HTML biasa. Ia mengesan seluruh halaman, bukan hanya kanvasnya: adegan boleh mengikut kursor, memandangnya dan beranimasi semasa halaman ditatal.

[Ketahui lebih lanjut tentang 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');

```

Eksport kod

## Adegan 3D anda, sebagai kod

Eksportnya sebagai Vanilla JS, React, Next.js, Three.js atau react-three-fiber. Salin kod, bukanya dalam CodeSandbox, atau muat turun fail dan hos sendiri.

[Ketahui lebih lanjut tentang eksport kod](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

Juga di web

## Daripada pautan hingga ke pelayan anda sendiri

### API Kod

Cetuskan acara, kemas kini pemboleh ubah dan ubah sifat objek daripada kod anda sendiri, dalam Vanilla JS, React dan Next.js.

### URL Awam

Kongsi adegan sebagai pautan, atau benamkannya dalam Notion, Webflow, WordPress dan banyak lagi.

### Hos sendiri

Muat turun keseluruhan projek, termasuk runtime, dan sajikannya daripada pelayan anda sendiri. Pada pelan Enterprise.

### WebGPU

Adegan dipaparkan dengan WebGPU, dan beralih ke WebGL secara automatik jika WebGPU tidak tersedia.

## Mula membina dalam 3D

Sambungkan ejen anda, jemput pasukan anda dan terbitkan adegan 3D pertama anda hari ini.

[Mula membina](https://app.spline.design/signin)[Sambungkan ejen anda](https://spline.design/ms/mcp)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/ms/academy)
- [API Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Penyelesaian](https://spline.design/solutions)

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

- [Terma & Syarat](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Hubungi

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

© 2026 - Spline, Inc.