# Bina Papan Kekunci Interaktif Gelap dalam 3D - Spline Academy (https://spline.design/ms/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)

> Dalam tutorial ini, anda akan belajar mencipta papan kekunci dengan reka bentuk kekunci yang lebih kompleks dan menambah interaktiviti.

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Bina Papan Kekunci Interaktif Gelap dalam 3D

# Bina Papan Kekunci Interaktif Gelap dalam 3D

Spline 3DPertengahan16 min

Dalam tutorial ini, anda akan belajar mencipta papan kekunci dengan reka bentuk kekunci yang lebih kompleks dan menambah interaktiviti.

Versi langsung: <https://my.spline.design/darkkeyboardtutorial-214f3bbc802a05f846868bc75004cb62/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=0s)
2. [0:28Mencipta kekunci pertama](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=28s)
3. [4:10Membuat kekunci lain](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=250s)
4. [5:50Mencipta bahan](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=350s)
5. [7:20Membuat reka bentuk alternatif](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=440s)
6. [9:00Menambah simbol kekunci](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=540s)
7. [10:50Menambah cahaya pada kekunci](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=650s)
8. [12:15Pelarasan Gaya akhir](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=735s)
9. [14:00Menambah interaksi](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=840s)

## Sumber berkaitan

- [Dark KeyboardTemplat](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 ToolsDokumen](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Depth Layer / 3D GradientDokumen](https://docs.spline.design/materials-shading/depth-layer-3d-gradient)
- [Events & InteractivityDokumen](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)

## Gambaran keseluruhan

- Spline 3D
- 16 min
- Pertengahan

## Sebahagian daripada

- [Asas Pemodelan dalam Spline](https://spline.design/ms/academy/collections/modeling-essentials-in-spline/build-a-dark-interactive-keyboard-in-3d)

## Tutorial berkaitan

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

[Perhalus & Gayakan Ikon 3D dengan BahanSpline 3DPemula9 min](https://spline.design/ms/academy/tutorials/refine-style-3d-icons-with-materials)[Bina Ikon 3D dengan VektorSpline 3DPemula10 min](https://spline.design/ms/academy/tutorials/build-3d-icons-with-vectors)[Animasikan Gumpalan 3D Organik dengan KeadaanSpline 3DPemula5 min](https://spline.design/ms/academy/tutorials/animate-organic-3d-blobs-with-states)

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