# Magdisenyo ng Interactive na 3D Keyboard - Spline Academy (https://spline.design/fil/academy/tutorials/design-an-interactive-3d-keyboard)

> Sa tutorial na ito, matututunan mo kung paano gumawa ng 3D keyboard mula sa wala gamit ang mga modeling tool, material asset, at ang mga Key Down/Up event.

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Magdisenyo ng Interactive na 3D Keyboard

# Magdisenyo ng Interactive na 3D Keyboard

Spline 3DIntermediate17 min

Sa tutorial na ito, matututunan mo kung paano gumawa ng 3D keyboard mula sa wala gamit ang mga modeling tool, material asset, at ang mga Key Down/Up event.

Silipin ang Spline: <https://spline.design/> Spline sa Instagram: <https://instagram.com/splinetool/>

☀️ Update: Malaki na ang ipinagbago ng Spline mula nang gawin namin ang tutorial na ito, at ngayon, may ilang bagong feature na magpapabilis sa pagsunod mo sa tutorial na ito.

1\. Pinagsasama ng bagong Key Press event ang Key Up at Key Down, kaya isang beses mo lang itong kailangang i-define. 2\. Sa bagong Components feature, puwede kang mag-duplicate ng object at mapanatili ang mga interaction sa duplicate (kaya isang Key lang ang kailangan mong gawin).

Tutorial tungkol sa mga component dito: <https://youtu.be/VSddFnDjPUA>

## Ang matututunan mo

1. [0:00Introduksyon](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=0s)
2. [1:05Modeling ng 3D key](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=65s)
3. [4:15Pagdaragdag ng mga material asset](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=255s)
4. [6:10Paggawa ng text sa mga key](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=370s)
5. [7:35Paggawa ng orange na key](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=455s)
6. [10:30Paggawa ng base ng keyboard](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=630s)
7. [13:50Pagdaragdag ng mga interaction event](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=830s)

## Mga kaugnay na resource

- [3D KeyboardTemplate](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 ToolsDokumento](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & ShadingDokumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Key Down EventDokumento](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDokumento](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)
- [Events & InteractivityDokumento](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)

## Overview

- Spline 3D
- 17 min
- Intermediate

## Bahagi ng

- [Mga Batayan ng Modeling sa Spline](https://spline.design/fil/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Gumawa ng Madilim na Interactive na Keyboard sa 3DSpline 3DIntermediate16 min](https://spline.design/fil/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Mag-animate ng mga Organic na 3D Blob gamit ang mga StateSpline 3DBaguhan5 min](https://spline.design/fil/academy/tutorials/animate-organic-3d-blobs-with-states)[Gumawa ng 3D Light Switch na may InteractionSpline 3DIntermediate13 min](https://spline.design/fil/academy/tutorials/build-a-3d-light-switch-with-interaction)

[Spline](https://spline.design/fil)

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

- [Web](https://spline.design/fil/web)
- [iOS](https://spline.design/fil/ios)
- [Android](https://spline.design/fil/android)

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fil/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Mga Solusyon](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.