# Gumawa ng Madilim na Interactive na Keyboard sa 3D - Spline Academy (https://spline.design/fil/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)

> Sa tutorial na ito, matututunan mong gumawa ng keyboard na may mas komplikadong design ng mga key at magdagdag ng interactivity.

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

# Gumawa ng Madilim na Interactive na Keyboard sa 3D

Spline 3DIntermediate16 min

Sa tutorial na ito, matututunan mong gumawa ng keyboard na may mas komplikadong design ng mga key at magdagdag ng interactivity.

Live na bersyon: <https://my.spline.design/darkkeyboardtutorial-214f3bbc802a05f846868bc75004cb62/>

## Ang matututunan mo

1. [0:00Introduksyon](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=0s)
2. [0:28Paggawa ng unang key](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=28s)
3. [4:10Paggawa ng iba pang key](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=250s)
4. [5:50Paggawa ng mga material](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=350s)
5. [7:20Paggawa ng mga alternatibong design](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=440s)
6. [9:00Pagdaragdag ng mga simbolo sa key](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=540s)
7. [10:50Pagdaragdag ng glow sa mga key](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=650s)
8. [12:15Mga huling adjustment sa Style](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=735s)
9. [14:00Pagdaragdag ng mga interaction](https://www.youtube.com/watch?v=1ZVdMR1qErw&t=840s)

## Mga kaugnay na resource

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

## Overview

- Spline 3D
- 16 min
- Intermediate

## Bahagi ng

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

## Mga kaugnay na tutorial

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

[Pinuhin at Lagyan ng Style ang mga 3D Icon gamit ang mga MaterialSpline 3DBaguhan9 min](https://spline.design/fil/academy/tutorials/refine-style-3d-icons-with-materials)[Gumawa ng mga 3D Icon gamit ang mga VectorSpline 3DBaguhan10 min](https://spline.design/fil/academy/tutorials/build-3d-icons-with-vectors)[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)

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