# Gumawa ng Interactive na 3D Character gamit ang mga Variable - Spline Advanced | Malalimang Pagtalakay sa mga Feature - Spline Academy (https://spline.design/fil/academy/tutorials/create-an-interactive-3d-character-using-variables)

> Hello! Sa video na ito, ipapakita namin kung paano bigyang-buhay ang isang cute na interactive na 3D Pufferfish character. Silipin ang Spline:…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Kurso](https://spline.design/fil/academy/collections)
3. [Spline Advanced | Malalimang Pagtalakay sa mga Feature](https://spline.design/fil/academy/collections/spline-advanced-feature-deep-dive)
4. Gumawa ng Interactive na 3D Character gamit ang mga Variable

# Gumawa ng Interactive na 3D Character gamit ang mga Variable

Aralin 5 ng 17Spline 3DAdvanced17 min

Hello! Sa video na ito, ipapakita namin kung paano bigyang-buhay ang isang cute na interactive na 3D Pufferfish character. Silipin ang Spline: <https://spline.design/>

Gagamit tayo ng mga variable para mag-trigger ng mga event na nagbabago sa size at posisyon ng maliit na kaibigan natin. Habang mas madalas mong i-click ang pufferfish, lalo siyang lumolobo hanggang sa lumutang siya sa itaas ng landing page.

Gagabayan ka rin namin kung paano gumawa at mag-animate ng iba't ibang elemento ng Pufferfish. Makikita mo silang lumaki kasabay ng isda at magdaragdag tayo ng masasayang effect gaya ng pagtalbog kapag lumapit ang mouse.

Kaya simulan na natin, tuklasin ang mahika ng mga variable, at mag-enjoy sa paggawa ng mga interactive na scene!

🐡 Remix: <https://app.spline.design/file/810351d5-4fd8-4f85-92b2-286329f49a3f> 🌐 Live na Site: <https://safe-value-478717.framer.app/>

Alamin pa ang tungkol sa mga Variable: 👉 <https://youtu.be/Id%5FSZVCUVMM> 📘 <https://docs.spline.design/>

✨ Sumali sa aming Spline community para sa inspirasyon at i-share ang mga design mo. <https://community.spline.design/>

💬 ❤️ I-share ang mga suggestion mo para sa tutorial sa comments.

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=0s)
2. [0:34Paggawa at Paggamit ng mga Variable](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=34s)
3. [4:29Pagdaragdag ng Iba't Ibang Elemento](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=269s)
4. [8:34Pag-animate ng mga Elemento at Pagpapasunod sa mga Ito sa Paglaki](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=514s)
5. [15:02Mga Interactive na Effect at Pag-export](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=902s)

## Mga kaugnay na resource

- [Pufferfish Template](https://app.spline.design/academy/tutorials/create-an-interactive-3d-character-using-variables?redirect-duplicate-template-uuid=4c31a93c-9867-4864-9e5b-58eb843e508d&is-2d-file=false)
- [VariablesDokumento](https://docs.spline.design/interaction-states-events-and-actions/variables)
- [Variable Change EventDokumento](https://docs.spline.design/interaction-states-events-and-actions/events/variable-change-event)
- [Conditional ActionDokumento](https://docs.spline.design/interaction-states-events-and-actions/actions/conditional-action)

## Overview

- Spline 3D
- 17 min
- Advanced

## Susunod

[Paano Gumawa ng 3D Carousel Interaction16 minAdvanced](https://spline.design/fil/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)[Magpatuloy](https://spline.design/fil/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)

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