# Magdagdag ng mga Mouse-Based na Interaction sa mga 3D Object - Spline Academy (https://spline.design/fil/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

> Alamin kung paano ka madaling makakagawa ng mga interaction sa pagpapatugon ng mga 3D element sa cursor mo!

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Magdagdag ng mga Mouse-Based na Interaction sa mga 3D Object

# Magdagdag ng mga Mouse-Based na Interaction sa mga 3D Object

Spline 3DBaguhan14 min

Alamin kung paano ka madaling makakagawa ng mga interaction sa pagpapatugon ng mga 3D element sa cursor mo!

Ginawa ang gabay na ito para sa mga baguhan, para madaling sundan ang introduksyon sa mga konseptong ito.

Ipinapakita namin ang lakas ng mga mouse event sa pagpapaganda ng mga 3D design, gaya ng mga mouse up, down, press at hover event. Ipinapakita rin namin kung paano gumawa ng mga interactive experience sa pag-link ng mga mouse event sa mga action gaya ng pagbabago ng kulay, size at animation, pati na rin galaw ng camera at marami pang iba!

Silipin ang iba pang tutorial na ito para sa higit pa tungkol sa mga mouse event! <https://youtu.be/pR2AhQ22KwM> <https://youtu.be/eCxLYk2rNzg> <https://youtu.be/hRy-Iqle6EU> <https://youtu.be/RmC2xEtXobE> <https://youtu.be/lJIDSiDlhvw>

\---

Tumuklas ng iba pang kahanga-hangang creator at project #MadeInSpline sa <https://community.spline.design/>

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=0s)
2. [0:29Pag-unawa sa mga Mouse Event](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=29s)
3. [1:42Paggawa ng Simpleng Mouse Down Interaction](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=102s)
4. [5:02Pagpalit ng kulay sa click](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=302s)
5. [6:03Mga interactive na button at pagpalit ng kulay](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=363s)
6. [8:47Click interaction na may pagbabago sa posisyon ng camera](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=527s)
7. [10:54Pagdaragdag ng mga Sound Effect](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=654s)
8. [12:01Pagtuklas sa Create Object Action](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=721s)
9. [12:20Pagdaragdag ng URL para magbukas ng website sa click.](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=740s)

## Mga kaugnay na resource

- [Mouse Hover EventTemplate](https://app.spline.design/academy/tutorials/add-mouse-based-interactions-to-3d-objects?redirect-duplicate-template-uuid=267cdcd9-2272-426a-9b67-4028d2c1d024&is-2d-file=false)
- [How state-based animation worksDokumento](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Events & InteractivityDokumento](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [EventsDokumento](https://docs.spline.design/#events)
- [ActionsDokumento](https://docs.spline.design/#actions)

## Overview

- Spline 3D
- 14 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/add-mouse-based-interactions-to-3d-objects)

## Mga kaugnay na tutorial

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

[Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang HanaHanaBaguhan6 min](https://spline.design/fil/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[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)

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