# Crea un interruptor de luz 3D con interacción - Spline Academy (https://spline.design/es/academy/tutorials/build-a-3d-light-switch-with-interaction)

> En este tutorial retomamos la idea de una interacción de alternancia con la nueva función 'Toggle', disponible en los eventos de ratón y de teclado.

1. [Academy](https://spline.design/es/academy)
2. [Tutoriales](https://spline.design/es/academy/tutorials)
3. Crea un interruptor de luz 3D con interacción

# Crea un interruptor de luz 3D con interacción

Spline 3DIntermedio13 min

En este tutorial retomamos la idea de una interacción de alternancia con la nueva función 'Toggle', disponible en los eventos de ratón y de teclado.

Esta función facilita crear efectos de alternancia con un solo evento.

Versión en vivo: <https://my.spline.design/switchtutorial-70a23dd070513899912c011c202b0368/>

## Lo que aprenderás

1. [0:00Introducción](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=0s)
2. [0:55Crear la base del interruptor](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=55s)
3. [3:00Crear la forma del interruptor](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=180s)
4. [7:20Añadir el borde del interruptor](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=440s)
5. [8:40Añadir el evento de alternancia con el ratón](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=520s)
6. [9:55Detalles finales](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=595s)

## Recursos relacionados

- [Switch TogglePlantilla](https://app.spline.design/academy/tutorials/build-a-3d-light-switch-with-interaction?redirect-duplicate-template-uuid=10f3c48a-c074-4e8d-bea0-607edaa22121&is-2d-file=false)
- [3D Modeling ToolsDocumento](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & ShadingDocumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Events & InteractivityDocumento](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [Transition ActionDocumento](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Resumen

- Spline 3D
- 13 min
- Intermedio

## Parte de

- [Fundamentos de modelado en Spline](https://spline.design/es/academy/collections/modeling-essentials-in-spline/build-a-3d-light-switch-with-interaction)

## Tutoriales relacionados

[Todos los tutoriales](https://spline.design/es/academy/tutorials)

[Crea un teclado oscuro interactivo en 3DSpline 3DIntermedio16 min](https://spline.design/es/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Diseña un teclado 3D interactivoSpline 3DIntermedio17 min](https://spline.design/es/academy/tutorials/design-an-interactive-3d-keyboard)[Crea un planeta 3D realista con materiales e iluminaciónSpline 3DPrincipiante7 min](https://spline.design/es/academy/tutorials/build-a-realistic-3d-planet-with-materials-lighting)

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

El editor 3D y 2D para equipos y sus agentes. Publica en la web, iOS y Android.

#### Pregúntale a la IA sobre Spline

#### Productos

- [Diseño 3D](https://spline.design/es/3d-design)
- [Hana](https://spline.design/es/hana)
- [Omma](https://omma.build)
- [Generación 3D con IA](https://spline.design/es/ai-generate)
- [Spline MCP](https://spline.design/es/mcp)
- [Spline Arena](https://spline.design/es/arena)
- [Precios](https://spline.design/es/pricing)
- [Enterprise](https://spline.design/es/enterprise)

#### Runtimes

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

#### Apps

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

#### Aprende

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

#### Comunidad

- [Comunidad de Spline](https://community.spline.design)
- [Blog](https://spline.design/es/blog)
- [Novedades](https://spline.design/es/changelog)
- [Educación](https://spline.design/es/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/es/affiliate)

#### Empresa

- [Clientes](https://spline.design/es/customers)
- [Empleo](https://www.ycombinator.com/companies/spline/jobs)
- [Seguridad](https://spline.design/es/security)

#### Legal

- [Términos y condiciones](https://spline.design/terms)
- [Privacidad](https://spline.design/privacy)

#### Contacto

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

© 2026 - Spline, Inc.