# Design an Interactive 3D Keyboard (https://academy.spline.design/tutorials/design-an-interactive-3d-keyboard)

> A video tutorial from the Spline Academy.

- Product: Spline 3D
- Level: intermediate
- Duration: 16 min 51 s
- Published: 2022-04-20
- Video: https://www.youtube.com/watch?v=cdru3Ibj8Eg
- Part of: [Modeling Essentials in Spline](https://academy.spline.design/collections/modeling-essentials-in-spline.md)

## About this tutorial

In this tutorial, you will learn how to build a 3D keyboard from scratch using modeling tools, material assets, and the Key Down/Up events.

Check Spline: https://spline.design/
Spline on Instagram: https://instagram.com/splinetool/

☀️Update: Spline has improved a lot since we made this tutorial, and now, a couple of new features will enable you to follow this tutorial much faster.

1. The new Key Press event combines the Key Up and Key Down, so you only need to define it once.
2. With the new Components feature, you can duplicate an object and maintain the interactions on the duplicate (so you only need to build one Key).

Tutorial about components here: https://youtu.be/VSddFnDjPUA

## Chapters

- [0:00](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=0s) Introduction
- [1:05](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=65s) Modeling a 3D key
- [4:15](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=255s) Adding material assets
- [6:10](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=370s) Create the text in the keys
- [7:35](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=455s) Creating the orange key
- [10:30](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=630s) Making the keyboard base
- [13:50](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=830s) Adding interaction events

## Related documentation

- [3D Modeling Tools](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & Shading](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Key Down Event](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition Action](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)
- [Events & Interactivity](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)