# Designa ett interaktivt tangentbord i 3D - Spline Academy (https://spline.design/sv/academy/tutorials/design-an-interactive-3d-keyboard)

> I den här tutorialen lär du dig att bygga ett tangentbord i 3D från grunden med modelleringsverktyg, materialtillgångar och händelserna Key Down/Up.

1. [Academy](https://spline.design/sv/academy)
2. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Designa ett interaktivt tangentbord i 3D

# Designa ett interaktivt tangentbord i 3D

Spline 3DMedelnivå17 min

I den här tutorialen lär du dig att bygga ett tangentbord i 3D från grunden med modelleringsverktyg, materialtillgångar och händelserna Key Down/Up.

Kolla in Spline: <https://spline.design/> Spline på Instagram: <https://instagram.com/splinetool/>

☀️ Uppdatering: Spline har förbättrats mycket sedan vi gjorde den här tutorialen, och nu finns det några nya funktioner som gör att du kan följa den mycket snabbare.

1\. Den nya händelsen Key Press kombinerar Key Up och Key Down, så du behöver bara definiera den en gång. 2\. Med den nya funktionen Components kan du duplicera ett objekt och behålla interaktionerna på kopian (så du behöver bara bygga en tangent).

Tutorial om komponenter här: <https://youtu.be/VSddFnDjPUA>

## Det här lär du dig

1. [0:00Introduktion](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=0s)
2. [1:05Modellera en tangent i 3D](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=65s)
3. [4:15Lägga till materialtillgångar](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=255s)
4. [6:10Skapa texten på tangenterna](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=370s)
5. [7:35Skapa den orange tangenten](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=455s)
6. [10:30Göra tangentbordets bas](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=630s)
7. [13:50Lägga till interaktionshändelser](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=830s)

## Relaterade resurser

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

## Översikt

- Spline 3D
- 17 min
- Medelnivå

## Del av

- [Grunderna i modellering i Spline](https://spline.design/sv/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)

## Relaterade tutorials

[Alla tutorials](https://spline.design/sv/academy/tutorials)

[Bygg ett mörkt interaktivt tangentbord i 3DSpline 3DMedelnivå16 min](https://spline.design/sv/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Animera organiska 3D-blobbar med tillståndSpline 3DNybörjare5 min](https://spline.design/sv/academy/tutorials/animate-organic-3d-blobs-with-states)[Bygg en ljusströmbrytare i 3D med interaktionSpline 3DMedelnivå13 min](https://spline.design/sv/academy/tutorials/build-a-3d-light-switch-with-interaction)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/sv/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Lösningar](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.