# Gumawa ng mga Animated na 3D Blob na Tumutugon sa Mouse Mo - Spline 101 | Gawin ang Una Mong Interactive Scene - Spline Academy (https://spline.design/fil/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse)

> Sa beginner-friendly na tutorial na ito, magsisimula tayo mula sa wala at aalamin kung paano gumawa ng makukulay, animated at interactive na mga 3D blob…

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. Gumawa ng mga Animated na 3D Blob na Tumutugon sa Mouse Mo

# Gumawa ng mga Animated na 3D Blob na Tumutugon sa Mouse Mo

Aralin 15 ng 16Spline 3DBaguhan12 min

Sa beginner-friendly na tutorial na ito, magsisimula tayo mula sa wala at aalamin kung paano gumawa ng makukulay, animated at interactive na mga 3D blob gamit ang Shape Blend.

Gagabayan ka namin sa ilang madadaling tip sa paglalagay ng mga kulay at texture para makagawa ng maayos na mga transition at natural na tingnang mga gradient.

Dagdag pa, tutuklasin namin kung paano magdagdag ng mga interactive na event, gaya ng pagbabago ng hugis ng blob kapag ni-hover mo ito.

\--

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=l32kDk5DU00&t=0s)
2. [0:24Paggawa ng Blob gamit ang Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=24s)
3. [1:31Pagdaragdag ng mga Kulay](https://www.youtube.com/watch?v=l32kDk5DU00&t=91s)
4. [3:21Pagdaragdag ng mga Glow Effect at Texture](https://www.youtube.com/watch?v=l32kDk5DU00&t=201s)
5. [5:20Pag-animate ng Ating Blob](https://www.youtube.com/watch?v=l32kDk5DU00&t=320s)
6. [6:49Paano Gawing Loop ang Animation](https://www.youtube.com/watch?v=l32kDk5DU00&t=409s)
7. [8:32Interactive na Effect gamit ang Cursor](https://www.youtube.com/watch?v=l32kDk5DU00&t=512s)
8. [9:44Mabilis na mga Tip](https://www.youtube.com/watch?v=l32kDk5DU00&t=584s)
9. [10:38Iba Pang Halimbawa ng mga Interactive na Scene gamit ang Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=638s)
10. [11:00Ang Aming Spline Community](https://www.youtube.com/watch?v=l32kDk5DU00&t=660s)
11. [11:05Maging Susunod Naming Designer of the Week!](https://www.youtube.com/watch?v=l32kDk5DU00&t=665s)

## Mga kaugnay na resource

- [Animated Shape BlendTemplate](https://app.spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse?redirect-duplicate-template-uuid=546ba9b3-f563-43e4-bbd7-a72c5941902e&is-2d-file=false)
- [Shape BlendDokumento](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & ShadingDokumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [How state-based animation worksDokumento](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Follow EventDokumento](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Overview

- Spline 3D
- 12 min
- Baguhan

## Susunod

[Gawing Interactive na Web Experience ang Iyong mga Spline Design10 minBaguhan](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)[Magpatuloy](https://spline.design/fil/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

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