# Paano Gumawa ng mga 3D Button Interaction - Spline 101 | Gawin ang Una Mong Interactive Scene - Spline Academy (https://spline.design/fil/academy/tutorials/how-to-create-3d-button-interactions)

> Sa tutorial na ito, ipapakita namin kung paano gumawa ng simpleng 3D button at magdagdag ng mga basic na interactive feature gaya ng pag-adjust ng size,…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Kurso](https://spline.design/fil/academy/collections)
3. [Spline 101 | Gawin ang Una Mong Interactive Scene](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene)
4. Paano Gumawa ng mga 3D Button Interaction

# Paano Gumawa ng mga 3D Button Interaction

Aralin 5 ng 16Spline 3DBaguhan10 min

Sa tutorial na ito, ipapakita namin kung paano gumawa ng simpleng 3D button at magdagdag ng mga basic na interactive feature gaya ng pag-adjust ng size, pagpalit ng kulay at pag-toggle ng posisyon gamit ang mga mouse event.

🏡 Susunod, ipapakita namin kung paano gumawa ng button na umiikot at nagpapakita ng isang scene, at kung paano i-link ang button mo para magbukas ng URL.

Swak ang tutorial na ito para sa mga baguhang interesado sa interactive 3D design!

Sabihin sa amin sa comments kung may iba ka pang gustong matutunan!

I-share ang sarili mong bersyon ng 3D button sa aming community! 💖

🔮 Spline Community → <https://community.spline.design>

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=0s)
2. [0:15Pagdidisenyo ng 3D Button](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=15s)
3. [1:29Pagbabago ng Size - Mouse Hover Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=89s)
4. [2:57Effect ng Pagpalit ng Kulay](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=177s)
5. [4:04Toggle - Mouse Down Event](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=244s)
6. [5:29Button na nagpapakita ng interactive na 3D scene](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=329s)
7. [8:41Pag-link sa mga URL - Open Link Action](https://www.youtube.com/watch?v=B8o5O7PyKjY&t=521s)

## Mga kaugnay na resource

- [House ButtonTemplate](https://app.spline.design/academy/tutorials/how-to-create-3d-button-interactions?redirect-duplicate-template-uuid=eaa257e7-bf12-4666-8fe0-26bc66f59075&is-2d-file=false)
- [Extruding 2D objects in 3DDokumento](https://docs.spline.design/designing-in-3-d/extruding-2d-objects-in-3-d)
- [How state-based animation worksDokumento](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Key Down EventDokumento](https://docs.spline.design/interaction-states-events-and-actions/events/key-down-event)
- [Transition ActionDokumento](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overview

- Spline 3D
- 10 min
- Baguhan

## Susunod

[Magdagdag ng mga Look At Animation sa mga 3D Object10 minBaguhan](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)[Magpatuloy](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene/add-look-at-animations-to-3d-objects)

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