# Mendesain situs web 3D dengan Spline dan Framer - Spline Academy (https://spline.design/id/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

> Halo! Dalam tutorial ini, Anda akan belajar membuat situs web 3D dengan scene kaca 3D buatan Spline dan mengintegrasikannya ke Framer (web builder) untuk…

1. [Academy](https://spline.design/id/academy)
2. [Tutorial](https://spline.design/id/academy/tutorials)
3. Mendesain situs web 3D dengan Spline dan Framer

# Mendesain situs web 3D dengan Spline dan Framer

Spline 3DPemula14 mnt

Halo! Dalam tutorial ini, Anda akan belajar membuat situs web 3D dengan scene kaca 3D buatan Spline dan mengintegrasikannya ke Framer (web builder) untuk membuat dan memublikasikan situs web yang berfungsi penuh. Coba Spline: <https://spline.design/> Situs demo: <https://healthy-others-546063.framer.app/> Ikuti Spline: <https://instagram.com/splinetool/>

## Yang akan Anda pelajari

1. [0:00Pengantar](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=0s)
2. [0:33Membuat bola](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=33s)
3. [1:40Menambahkan material](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=100s)
4. [2:52Membuat kaca](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=172s)
5. [7:50Mengekspor scene 3D dari Spline](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=470s)
6. [8:26Mengimpor scene 3D ke Framer](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=506s)
7. [10:00Menyesuaikan komposisi situs web](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=600s)
8. [11:30Menambahkan Orbit saat hover](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=690s)
9. [12:25Penyesuaian akhir](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=745s)

## Ikhtisar

- Spline 3D
- 14 mnt
- Pemula

## Tutorial terkait

[Semua tutorial](https://spline.design/id/academy/tutorials)

[Cara Menambahkan Interaksi Follow ke Objek 3DSpline 3DPemula6 mnt](https://spline.design/id/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Mendesain Kubus Kaca dalam 3DSpline 3DPemula11 mnt](https://spline.design/id/academy/tutorials/design-a-glass-cube-in-3d)[Membuat Animasi Scroll 3D & Mengintegrasikannya ke FramerSpline 3DPemula12 mnt](https://spline.design/id/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

[Spline](https://spline.design/id)

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

- [Web](https://spline.design/id/web)
- [iOS](https://spline.design/id/ios)
- [Android](https://spline.design/id/android)

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/id/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solusi](https://spline.design/solutions)

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

- [Syarat & Ketentuan](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Kontak

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.