# Paano Gumawa ng mga 3D Button Interaction - 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 Tutorial](https://spline.design/fil/academy/tutorials)
3. Paano Gumawa ng mga 3D Button Interaction

# Paano Gumawa ng mga 3D Button Interaction

Spline 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

## Bahagi ng

- [Spline 101 | Gawin ang Una Mong Interactive Scene](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene/how-to-create-3d-button-interactions)

## Mga kaugnay na tutorial

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

[Paano Gumawa ng Reactive na 3D Orb na may Galaw at InteractionSpline 3DIntermediate7 min](https://spline.design/fil/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Paano Gumawa ng mga 3D Data Visualization sa Spline gamit ang mga Variable at Real-Time APISpline 3DAdvanced15 min](https://spline.design/fil/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Magdagdag ng mga Mouse-Based na Interaction sa mga 3D ObjectSpline 3DBaguhan14 min](https://spline.design/fil/academy/tutorials/add-mouse-based-interactions-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.