# Reka Bentuk Papan Kekunci 3D Interaktif - Spline Academy (https://spline.design/ms/academy/tutorials/design-an-interactive-3d-keyboard)

> Dalam tutorial ini, anda akan belajar cara membina papan kekunci 3D dari awal menggunakan alat pemodelan, aset bahan dan peristiwa Key Down/Up.

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

# Reka Bentuk Papan Kekunci 3D Interaktif

Spline 3DPertengahan17 min

Dalam tutorial ini, anda akan belajar cara membina papan kekunci 3D dari awal menggunakan alat pemodelan, aset bahan dan peristiwa Key Down/Up.

Lihat Spline: <https://spline.design/> Spline di Instagram: <https://instagram.com/splinetool/>

☀️Kemas kini: Spline telah banyak bertambah baik sejak kami membuat tutorial ini, dan kini beberapa ciri baharu membolehkan anda mengikuti tutorial ini dengan lebih pantas.

1\. Peristiwa Key Press baharu menggabungkan Key Up dan Key Down, jadi anda hanya perlu menentukannya sekali. 2\. Dengan ciri Components baharu, anda boleh menduplikasi objek dan mengekalkan interaksi pada duplikat itu (jadi anda hanya perlu membina satu Kekunci).

Tutorial tentang komponen di sini: <https://youtu.be/VSddFnDjPUA>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=0s)
2. [1:05Memodelkan kekunci 3D](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=65s)
3. [4:15Menambah aset bahan](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=255s)
4. [6:10Mencipta teks pada kekunci](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=370s)
5. [7:35Mencipta kekunci oren](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=455s)
6. [10:30Membuat asas papan kekunci](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=630s)
7. [13:50Menambah peristiwa interaksi](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=830s)

## Sumber berkaitan

- [3D KeyboardTemplat](https://app.spline.design/academy/tutorials/design-an-interactive-3d-keyboard?redirect-duplicate-template-uuid=d637461f-632f-46a7-b66f-988150e33af6&is-2d-file=false)
- [3D Modeling ToolsDokumen](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & ShadingDokumen](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Key Down EventDokumen](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDokumen](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)
- [Events & InteractivityDokumen](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)

## Gambaran keseluruhan

- Spline 3D
- 17 min
- Pertengahan

## Sebahagian daripada

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

## Tutorial berkaitan

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

[Bina Papan Kekunci Interaktif Gelap dalam 3DSpline 3DPertengahan16 min](https://spline.design/ms/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Animasikan Gumpalan 3D Organik dengan KeadaanSpline 3DPemula5 min](https://spline.design/ms/academy/tutorials/animate-organic-3d-blobs-with-states)[Bina Suis Lampu 3D dengan InteraksiSpline 3DPertengahan13 min](https://spline.design/ms/academy/tutorials/build-a-3d-light-switch-with-interaction)

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