# Gumawa ng mga Interactive na 3D Fluid Shape na Sumusunod sa Cursor - Spline Academy (https://spline.design/fil/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)

> Sa tutorial na ito, gagabayan ka namin sa paggawa ng mga design na hango sa likido gamit ang shape blending. Sama-sama tayong gagawa ng mga nakabibighaning…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Gumawa ng mga Interactive na 3D Fluid Shape na Sumusunod sa Cursor

# Gumawa ng mga Interactive na 3D Fluid Shape na Sumusunod sa Cursor

Spline 3DBaguhan12 min

Sa tutorial na ito, gagabayan ka namin sa paggawa ng mga design na hango sa likido gamit ang shape blending. Sama-sama tayong gagawa ng mga nakabibighaning hugis na parang tubig, magdaragdag ng transparency at iba pang effect para makamit ang makintab na aesthetic, at maglalagay ng interaction na nagpapasunod sa mga hugis sa cursor mo, para bigyang-buhay ang mga design mo gamit ang maayos na mga animation!

🌊 Remix: <https://app.spline.design/file/7f488663-6208-4bb0-802a-70bfaa865b27>

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=5W0BSoS24Jk&t=0s)
2. [0:21Pagdidisenyo ng mga abstract na hugis](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=21s)
3. [1:46Paano gumawa ng mga transparent at makintab na material](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=106s)
4. [4:38Mabilis na Tip: Cloner + Randomness para sa mga looping animation](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=278s)
5. [5:54Interactive na Mahika: Pasunurin ang mga hugis mo sa cursor (Follow event)](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=354s)
6. [9:31Mabilis na Tip: Gumawa ng kapansin-pansing animated na turntable](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=571s)

## Mga kaugnay na resource

- [Water InteractionTemplate](https://app.spline.design/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor?redirect-duplicate-template-uuid=f4fc1df0-cb80-4a65-9db1-68f1440194c4&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)
- [Follow EventDokumento](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Overview

- Spline 3D
- 12 min
- Baguhan

## Bahagi ng

- [Animation at mga Interaction sa Spline](https://spline.design/fil/academy/collections/animation-interactions-in-spline/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)

## Mga kaugnay na tutorial

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

[Paano Magdagdag ng Follow Interaction sa isang 3D ObjectSpline 3DBaguhan6 min](https://spline.design/fil/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Gumawa ng 3D Scroll Animation at I-integrate sa FramerSpline 3DBaguhan12 min](https://spline.design/fil/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)[Pagdidisenyo ng 3D website gamit ang Spline at FramerSpline 3DBaguhan14 min](https://spline.design/fil/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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