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

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

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Design an Interactive 3D Keyboard

# Design an Interactive 3D Keyboard

Spline 3DIntermediate17 min

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>

## What you’ll learn

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

## Related resources

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

## Overview

- Spline 3D
- 17 min
- Intermediate

## Part of

- [Modeling Essentials in Spline](https://spline.design/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)

## Related tutorials

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

[Build a Dark Interactive Keyboard in 3DSpline 3DIntermediate16 min](https://spline.design/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Animate Organic 3D Blobs with StatesSpline 3DBeginner5 min](https://spline.design/academy/tutorials/animate-organic-3d-blobs-with-states)[Build a 3D Light Switch with InteractionSpline 3DIntermediate13 min](https://spline.design/academy/tutorials/build-a-3d-light-switch-with-interaction)

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

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

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

#### Runtimes

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

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

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

#### Community

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

#### Company

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

#### Legal

- [Terms & Conditions](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.