# Thiết kế vi tương tác nút bật/tắt 3D với Spline - Spline Academy (https://spline.design/vi/academy/tutorials/designing-a-3d-toggle-button-micro-interaction-with-spline)

> Trong hướng dẫn này, bạn sẽ học cách dùng hệ thống sự kiện và trạng thái để tạo vi tương tác và dựng một nút bật/tắt trong 3D.

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Thiết kế vi tương tác nút bật/tắt 3D với Spline

# Thiết kế vi tương tác nút bật/tắt 3D với Spline

Spline 3DCơ bản14 phút

Trong hướng dẫn này, bạn sẽ học cách dùng hệ thống sự kiện và trạng thái để tạo vi tương tác và dựng một nút bật/tắt trong 3D.

☀️ Cập nhật: Spline đang cải tiến rất nhanh, và giờ đã có cách mới để tạo hiệu ứng bật/tắt mà không cần dùng đối tượng ẩn.

Xem hướng dẫn này để biết thêm: <https://www.youtube.com/watch?v=lJIDSiDlhvw&t=10s&ab%5Fchannel=Spline>

☀️Cập nhật 2: Bạn có thể dùng tính năng Components mới để tạo các biến thể cho phần tử UI 3D của mình.

Hướng dẫn về component tại đây: <https://youtu.be/VSddFnDjPUA>

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

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=0s)
2. [0:20Tạo hình dạng nút bật/tắt](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=20s)
3. [1:40Tạo vật liệu](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=100s)
4. [5:45Tạo trigger sự kiện](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=345s)
5. [8:47Tạo trạng thái](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=527s)
6. [11:30Thêm chi tiết nhỏ](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=690s)
7. [12:20Tùy chọn xuất cuối cùng](https://www.youtube.com/watch?v=zkw5GT9nYS8&t=740s)

## 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)

[Dựng bàn phím 3D tương tác tông tốiSpline 3DTrung cấp16 phút](https://spline.design/vi/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Cách xây dựng nhiều cảnh 3D và nhập hoạt ảnhSpline 3DTrung cấp18 phút](https://spline.design/vi/academy/tutorials/how-to-build-3d-multi-scenes-and-import-animations)[Thiết kế website 3D với Spline và FramerSpline 3DCơ bản14 phút](https://spline.design/vi/academy/tutorials/designing-a-3d-website-with-spline-and-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.