# Gumawa ng 3D Light Switch na may Interaction - Spline Academy (https://spline.design/fil/academy/tutorials/build-a-3d-light-switch-with-interaction)

> Sa tutorial na ito, babalikan natin ang ideya ng toggle interaction gamit ang bagong feature na 'Toggle' na available sa mga Mouse at Key event.

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Gumawa ng 3D Light Switch na may Interaction

# Gumawa ng 3D Light Switch na may Interaction

Spline 3DIntermediate13 min

Sa tutorial na ito, babalikan natin ang ideya ng toggle interaction gamit ang bagong feature na 'Toggle' na available sa mga Mouse at Key event.

Pinapadali ng feature na ito ang paggawa ng mga toggle effect gamit ang iisang event.

Live na bersyon: <https://my.spline.design/switchtutorial-70a23dd070513899912c011c202b0368/>

## Ang matututunan mo

1. [0:00Introduksyon](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=0s)
2. [0:55Paggawa ng base ng switch](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=55s)
3. [3:00Paggawa ng hugis ng switch](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=180s)
4. [7:20Pagdaragdag ng border ng switch](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=440s)
5. [8:40Pagdaragdag ng mouse toggle event](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=520s)
6. [9:55Mga huling detalye](https://www.youtube.com/watch?v=lJIDSiDlhvw&t=595s)

## Mga kaugnay na resource

- [Switch ToggleTemplate](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 ToolsDokumento](https://docs.spline.design/designing-in-3-d/3d-modeling-tools)
- [Materials & ShadingDokumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Events & InteractivityDokumento](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [Transition ActionDokumento](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overview

- Spline 3D
- 13 min
- Intermediate

## Bahagi ng

- [Mga Batayan ng Modeling sa Spline](https://spline.design/fil/academy/collections/modeling-essentials-in-spline/build-a-3d-light-switch-with-interaction)

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Gumawa ng Madilim na Interactive na Keyboard sa 3DSpline 3DIntermediate16 min](https://spline.design/fil/academy/tutorials/build-a-dark-interactive-keyboard-in-3d)[Magdisenyo ng Interactive na 3D KeyboardSpline 3DIntermediate17 min](https://spline.design/fil/academy/tutorials/design-an-interactive-3d-keyboard)[Gumawa ng Makatotohanang 3D Planet gamit ang mga Material at LightingSpline 3DBaguhan7 min](https://spline.design/fil/academy/tutorials/build-a-realistic-3d-planet-with-materials-lighting)

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

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

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

#### Runtimes

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

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

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

#### Community

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

#### Kumpanya

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

#### Legal

- [Mga Tuntunin at Kundisyon](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.