# Concevoir un clavier 3D interactif - Spline Academy (https://spline.design/fr/academy/tutorials/design-an-interactive-3d-keyboard)

> Dans ce tutoriel, vous apprendrez à construire un clavier 3D de zéro avec les outils de modélisation, les ressources de matériaux et les événements Key Down/Up.

1. [Academy](https://spline.design/fr/academy)
2. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Concevoir un clavier 3D interactif

# Concevoir un clavier 3D interactif

Spline 3DIntermédiaire17 min

Dans ce tutoriel, vous apprendrez à construire un clavier 3D de zéro avec les outils de modélisation, les ressources de matériaux et les événements Key Down/Up.

Découvrez Spline : <https://spline.design/> Spline sur Instagram : <https://instagram.com/splinetool/>

☀️Mise à jour : Spline a beaucoup évolué depuis ce tutoriel, et quelques nouvelles fonctionnalités vous permettront de le suivre bien plus vite.

1\. Le nouvel événement Key Press combine Key Up et Key Down : vous n’avez donc besoin de le définir qu’une seule fois. 2\. Avec la nouvelle fonctionnalité Components, vous pouvez dupliquer un objet en conservant ses interactions sur le duplicata (il suffit donc de construire une seule touche).

Tutoriel sur les composants ici : <https://youtu.be/VSddFnDjPUA>

## Ce que vous allez apprendre

1. [0:00Introduction](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=0s)
2. [1:05Modéliser une touche 3D](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=65s)
3. [4:15Ajouter des ressources de matériaux](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=255s)
4. [6:10Créer le texte des touches](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=370s)
5. [7:35Créer la touche orange](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=455s)
6. [10:30Créer la base du clavier](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=630s)
7. [13:50Ajouter les événements d’interaction](https://www.youtube.com/watch?v=cdru3Ibj8Eg&t=830s)

## Ressources associées

- [3D KeyboardModèle](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)

## Présentation

- Spline 3D
- 17 min
- Intermédiaire

## Fait partie de

- [Les bases de la modélisation dans Spline](https://spline.design/fr/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Créer un clavier interactif sombre en 3DSpline 3DIntermédiaire16 min](https://spline.design/fr/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Animer des blobs 3D organiques avec des étatsSpline 3DDébutant5 min](https://spline.design/fr/academy/tutorials/animate-organic-3d-blobs-with-states)[Créer un interrupteur 3D interactifSpline 3DIntermédiaire13 min](https://spline.design/fr/academy/tutorials/build-a-3d-light-switch-with-interaction)

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

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

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

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

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

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.