# Paano Magdisenyo at Gumamit ng mga Component sa 3D - Spline Academy (https://spline.design/fil/academy/tutorials/how-to-design-and-use-components-in-3d)

> Hello! Sa tutorial na ito, matututunan mo kung paano gumagana ang mga component at kung paano nila mapapabilis at mapapahusay ang pagdidisenyo mo sa 3D.

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Paano Magdisenyo at Gumamit ng mga Component sa 3D

# Paano Magdisenyo at Gumamit ng mga Component sa 3D

Spline 3DIntermediate15 min

Hello! Sa tutorial na ito, matututunan mo kung paano gumagana ang mga component at kung paano nila mapapabilis at mapapahusay ang pagdidisenyo mo sa 3D.

Makikita mo ang mga scene file mula sa tutorial na ito sa Library (<https://app.spline.design/library>)

11: 34 Pag-detach ng mga instance

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=VSddFnDjPUA&t=0s)
2. [0:43Paggawa ng component instance](https://www.youtube.com/watch?v=VSddFnDjPUA&t=43s)
3. [2:24Mga instance override](https://www.youtube.com/watch?v=VSddFnDjPUA&t=144s)
4. [4:35Paggawa ng mga alternatibong design](https://www.youtube.com/watch?v=VSddFnDjPUA&t=275s)
5. [5:54Pagdaragdag ng mga event sa mga component](https://www.youtube.com/watch?v=VSddFnDjPUA&t=354s)
6. [7:00Pag-override ng mga interaction](https://www.youtube.com/watch?v=VSddFnDjPUA&t=420s)
7. [9:06Matatalinong gamit ng mga 3D component](https://www.youtube.com/watch?v=VSddFnDjPUA&t=546s)
8. [10:18Mga design system gamit ang mga component](https://www.youtube.com/watch?v=VSddFnDjPUA&t=618s)
9. [10:47Instance swapping](https://www.youtube.com/watch?v=VSddFnDjPUA&t=647s)
10. [12:06Pag-reset ng mga override](https://www.youtube.com/watch?v=VSddFnDjPUA&t=726s)
11. [13:11Cloner at mga instance](https://www.youtube.com/watch?v=VSddFnDjPUA&t=791s)
12. [14:20Outro](https://www.youtube.com/watch?v=VSddFnDjPUA&t=860s)

## Mga kaugnay na resource

- [Component ToggleTemplate](https://app.spline.design/academy/tutorials/how-to-design-and-use-components-in-3d?redirect-duplicate-template-uuid=a1664528-244c-463a-bdd2-c38500f46caa&is-2d-file=false)
- [ComponentsDokumento](https://docs.spline.design/designing-in-3-d/components)
- [Materials & ShadingDokumento](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Overview

- Spline 3D
- 15 min
- Intermediate

## Bahagi ng

- [Spline Advanced | Malalimang Pagtalakay sa mga Feature](https://spline.design/fil/academy/collections/spline-advanced-feature-deep-dive/how-to-design-and-use-components-in-3d)

## Mga kaugnay na tutorial

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

[Paano Gumawa ng mga Reusable na 3D ComponentSpline 3DIntermediate7 min](https://spline.design/fil/academy/tutorials/how-to-build-reusable-3d-components)[Tuklasin ang 3D Shape Blending sa SplineSpline 3DBaguhan26 min](https://spline.design/fil/academy/tutorials/explore-3d-shape-blending-in-spline)[Gumawa ng mga Interactive na 3D Fluid Shape na Sumusunod sa CursorSpline 3DBaguhan12 min](https://spline.design/fil/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)

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