# Dựng bàn phím 3D tương tác tông tối - Spline Academy (https://spline.design/vi/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)

> Trong hướng dẫn này, bạn sẽ học cách tạo một bàn phím với thiết kế phím phức tạp hơn và thêm tương tác.

1. [Academy](https://spline.design/vi/academy)
2. [Hướng dẫn](https://spline.design/vi/academy/tutorials)
3. Dựng bàn phím 3D tương tác tông tối

# Dựng bàn phím 3D tương tác tông tối

Spline 3DTrung cấp16 phút

Trong hướng dẫn này, bạn sẽ học cách tạo một bàn phím với thiết kế phím phức tạp hơn và thêm tương tác.

Phiên bản trực tiếp: <https://my.spline.design/darkkeyboardtutorial-214f3bbc802a05f846868bc75004cb62/>

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

1. [0:00Giới thiệu](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=0s)
2. [0:28Tạo phím đầu tiên](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=28s)
3. [4:10Tạo các phím còn lại](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=250s)
4. [5:50Tạo vật liệu](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=350s)
5. [7:20Tạo các phương án thiết kế](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=440s)
6. [9:00Thêm ký hiệu cho phím](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=540s)
7. [10:50Thêm hiệu ứng phát sáng cho phím](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=650s)
8. [12:15Điều chỉnh phong cách cuối cùng](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=735s)
9. [14:00Thêm tương tác](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=840s)

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

- [Dark KeyboardMẫu](https://app.spline.design/academy/tutorials/build-a-dark-interactive-keyboard-in-3d?redirect-duplicate-template-uuid=b9e61593-b49b-4010-a585-e7d89c171aef&is-2d-file=false)
- [3D Modeling ToolsTài liệu](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Depth Layer / 3D GradientTài liệu](https://docs.spline.design/materials-shading/depth-layer-3d-gradient)
- [Events & InteractivityTài liệu](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)

## Tổng quan

- Spline 3D
- 16 phút
- Trung cấp

## Thuộc

- [Dựng hình cơ bản trong Spline](https://spline.design/vi/academy/collections/modeling-essentials-in-spline/build-a-dark-interactive-keyboard-in-3d)

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

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

[Tinh chỉnh và tạo phong cách cho icon 3D bằng vật liệuSpline 3DCơ bản9 phút](https://spline.design/vi/academy/tutorials/refine-style-3d-icons-with-materials)[Dựng icon 3D bằng vectorSpline 3DCơ bản10 phút](https://spline.design/vi/academy/tutorials/build-3d-icons-with-vectors)[Tạo hoạt ảnh cho khối blob 3D hữu cơ bằng trạng tháiSpline 3DCơ bản5 phút](https://spline.design/vi/academy/tutorials/animate-organic-3d-blobs-with-states)

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