# Design an Interactive 3D Keyboard - Modeling Essentials in Spline - 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. [Courses](https://spline.design/academy/collections)
3. [Modeling Essentials in Spline](https://spline.design/academy/collections/modeling-essentials-in-spline)
4. Design an Interactive 3D Keyboard

# Design an Interactive 3D Keyboard

Lesson 8 of 8Spline 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

## Last lesson

That’s the end of Modeling Essentials in Spline.

[Back to the course](https://spline.design/academy/collections/modeling-essentials-in-spline)

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