# Gumawa ng 3D Light Switch na may Interaction - Mga Batayan ng Modeling sa Spline - 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 Kurso](https://spline.design/fil/academy/collections)
3. [Mga Batayan ng Modeling sa Spline](https://spline.design/fil/academy/collections/modeling-essentials-in-spline)
4. Gumawa ng 3D Light Switch na may Interaction

# Gumawa ng 3D Light Switch na may Interaction

Aralin 7 ng 8Spline 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

## Susunod

[Magdisenyo ng Interactive na 3D Keyboard17 minIntermediate](https://spline.design/fil/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)[Magpatuloy](https://spline.design/fil/academy/collections/modeling-essentials-in-spline/design-an-interactive-3d-keyboard)

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