# Biến thiết kế Spline thành trải nghiệm web tương tác - Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn - Spline Academy (https://spline.design/vi/academy/tutorials/turn-your-spline-designs-into-interactive-web-experiences)

> Học cách đưa thiết kế 3D Spline của bạn lên web một cách sống động! Trong mini masterclass này, chúng tôi sẽ hướng dẫn bạn mọi điều cần biết về việc tích…

1. [Academy](https://spline.design/vi/academy)
2. [Khóa học](https://spline.design/vi/academy/collections)
3. [Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene)
4. Biến thiết kế Spline thành trải nghiệm web tương tác

# Biến thiết kế Spline thành trải nghiệm web tương tác

Bài 16 / 16Spline 3DCơ bản10 phút

Học cách đưa thiết kế 3D Spline của bạn lên web một cách sống động! Trong mini masterclass này, chúng tôi sẽ hướng dẫn bạn mọi điều cần biết về việc tích hợp cảnh Spline vào website và các dự án web của bạn.

🎯 Bạn sẽ học được:

- Cách xuất và chia sẻ cảnh Spline bằng Public URL
- Nhúng bằng Spline Viewer để tích hợp nhanh
- Các tùy chọn xuất code cho Vanilla JS, Three.js, React, Next.js và React Three Fiber
- Tự host (self-hosted) để toàn quyền kiểm soát
- Tích hợp Spline với các công cụ dựng web như Framer, Webflow, Wix và Shopify

Hướng dẫn này dành cho bất kỳ ai muốn thêm các thành phần 3D tương tác vào website hoặc dự án của mình, cùng bắt đầu nhé!

## Tài nguyên liên quan

- [Likes ButtonMẫu](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 SceneTài liệu](https://docs.spline.design/#%F0%9F%8E%9E%EF%B8%8F-exporting-your-scene)
- [Exporting as Public URLsTài liệu](https://docs.spline.design/exporting-your-scene/web/exporting-as-public-ur-ls)
- [Exporting as Spline ViewerTài liệu](https://docs.spline.design/exporting-your-scene/web/exporting-as-spline-viewer)
- [Exporting as CodeTài liệu](https://docs.spline.design/exporting-your-scene/web/exporting-as-code)

## Tổng quan

- Spline 3D
- 10 phút
- Cơ bản

## Bài học cuối

Đây là phần kết của Spline 101 | Xây dựng cảnh tương tác đầu tiên của bạn.

[Quay lại khóa học](https://spline.design/vi/academy/collections/spline-101-build-your-first-interactive-scene)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.