# Thiết kế website 3D với Spline và Framer - Spline Academy (https://spline.design/vi/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

> Xin chào! Trong hướng dẫn này, bạn sẽ học cách tạo một website 3D bằng một cảnh kính 3D làm trong Spline và tích hợp vào Framer (công cụ dựng web) để tạo và…

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Thiết kế website 3D với Spline và Framer

# Thiết kế website 3D với Spline và Framer

Spline 3DCơ bản14 phút

Xin chào! Trong hướng dẫn này, bạn sẽ học cách tạo một website 3D bằng một cảnh kính 3D làm trong Spline và tích hợp vào Framer (công cụ dựng web) để tạo và xuất bản một website hoạt động hoàn chỉnh. Xem Spline: <https://spline.design/> Trang demo: <https://healthy-others-546063.framer.app/> Theo dõi Spline: <https://instagram.com/splinetool/>

## Bạn sẽ học được gì

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=0s)
2. [0:33Tạo các quả cầu](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=33s)
3. [1:40Thêm vật liệu](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=100s)
4. [2:52Tạo kính](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=172s)
5. [7:50Xuất cảnh 3D từ Spline](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=470s)
6. [8:26Nhập cảnh 3D vào Framer](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=506s)
7. [10:00Điều chỉnh bố cục website](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=600s)
8. [11:30Thêm Orbit khi rê chuột](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=690s)
9. [12:25Điều chỉnh cuối cùng](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=745s)

## Tổng quan

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

## Hướng dẫn liên quan

[Tất cả hướng dẫn](https://spline.design/vi/academy/tutorials)

[Cách thêm tương tác Follow cho đối tượng 3DSpline 3DCơ bản6 phút](https://spline.design/vi/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Thiết kế khối lập phương kính trong 3DSpline 3DCơ bản11 phút](https://spline.design/vi/academy/tutorials/design-a-glass-cube-in-3d)[Tạo hoạt ảnh cuộn 3D và tích hợp vào FramerSpline 3DCơ bản12 phút](https://spline.design/vi/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

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