# Pagdidisenyo ng 3D website gamit ang Spline at Framer - Spline Academy (https://spline.design/fil/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

> Hi! Sa tutorial na ito, matututunan mo kung paano gumawa ng 3D website gamit ang isang 3D glass scene na gawa sa Spline at i-integrate ito sa Framer (web…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Pagdidisenyo ng 3D website gamit ang Spline at Framer

# Pagdidisenyo ng 3D website gamit ang Spline at Framer

Spline 3DBaguhan14 min

Hi! Sa tutorial na ito, matututunan mo kung paano gumawa ng 3D website gamit ang isang 3D glass scene na gawa sa Spline at i-integrate ito sa Framer (web builder) para gumawa at mag-publish ng isang ganap na gumaganang website. Silipin ang Spline: <https://spline.design/> Demo Site: <https://healthy-others-546063.framer.app/> I-follow ang Spline: <https://instagram.com/splinetool/>

## Ang matututunan mo

1. [0:00Introduksyon](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=0s)
2. [0:33Paggawa ng mga sphere](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=33s)
3. [1:40Pagdaragdag ng mga material](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=100s)
4. [2:52Paggawa ng salamin](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=172s)
5. [7:50Pag-export ng 3D scene mula sa Spline](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=470s)
6. [8:26Pag-import ng 3D scene sa Framer](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=506s)
7. [10:00Pag-adjust ng komposisyon ng website](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=600s)
8. [11:30Pagdaragdag ng Orbit sa hover](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=690s)
9. [12:25Mga huling adjustment](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=745s)

## Overview

- Spline 3D
- 14 min
- Baguhan

## 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)[Magdisenyo ng Glass Cube sa 3DSpline 3DBaguhan11 min](https://spline.design/fil/academy/tutorials/design-a-glass-cube-in-3d)[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)

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