# Jadikan Reka Bentuk Spline Anda Pengalaman Web Interaktif - Spline Academy (https://spline.design/ms/academy/tutorials/turn-your-spline-designs-into-interactive-web-experiences)

> Ketahui cara menghidupkan reka bentuk 3D Spline anda di web! Dalam kelas induk mini ini, kami akan membimbing anda melalui semua yang perlu anda ketahui…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Jadikan Reka Bentuk Spline Anda Pengalaman Web Interaktif

# Jadikan Reka Bentuk Spline Anda Pengalaman Web Interaktif

Spline 3DPemula10 min

Ketahui cara menghidupkan reka bentuk 3D Spline anda di web! Dalam kelas induk mini ini, kami akan membimbing anda melalui semua yang perlu anda ketahui tentang menyepadukan adegan Spline ke dalam laman web dan projek web anda.

🎯 Apa yang Akan Anda Pelajari:

- Cara mengeksport dan berkongsi adegan Spline menggunakan Public URL
- Membenamkan dengan Spline Viewer untuk integrasi pantas
- Pilihan eksport kod untuk Vanilla JS, Three.js, React, Next.js dan React Three Fiber
- Pengehosan sendiri untuk kawalan penuh
- Menyepadukan Spline dengan pembina web seperti Framer, Webflow, Wix dan Shopify

Tutorial ini untuk sesiapa sahaja yang mahu menambah elemen 3D interaktif ke laman atau projek mereka, jadi jom kita mulakan!

## Sumber berkaitan

- [Likes ButtonTemplat](https://app.spline.design/academy/tutorials/turn-your-spline-designs-into-interactive-web-experiences?redirect-duplicate-template-uuid=0ffd92cf-735d-47e7-8cea-ad0bebdcd0d0&is-2d-file=false)
- [Exporting Your SceneDokumen](https://docs.spline.design/#%F0%9F%8E%9E%EF%B8%8F-exporting-your-scene)
- [Exporting as Public URLsDokumen](https://docs.spline.design/exporting-your-scene/web/exporting-as-public-ur-ls)
- [Exporting as Spline ViewerDokumen](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)
- [Exporting as CodeDokumen](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

## Gambaran keseluruhan

- Spline 3D
- 10 min
- Pemula

## Sebahagian daripada

- [Spline 101 | Bina Adegan Interaktif Pertama Anda](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

## Tutorial berkaitan

[Semua tutorial](https://spline.design/ms/academy/tutorials)

[Mereka bentuk laman web 3D dengan Spline dan FramerSpline 3DPemula14 min](https://spline.design/ms/academy/tutorials/designing-a-3d-website-with-spline-and-framer)[Bina Pengalaman Portal 3D Dikawal Kecondongan dalam SwiftUISpline 3DLanjutan14 min](https://spline.design/ms/academy/tutorials/build-a-tilt-controlled-3d-portal-experience-in-swiftui)[Cara Membina Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DPertengahan7 min](https://spline.design/ms/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

[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.