# Mereka bentuk laman web 3D dengan Spline dan Framer - Spline Academy (https://spline.design/ms/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

> Hai! Dalam tutorial ini, anda akan belajar cara mencipta laman web 3D menggunakan adegan kaca 3D yang dibuat dalam Spline dan menyepadukannya ke dalam…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Mereka bentuk laman web 3D dengan Spline dan Framer

# Mereka bentuk laman web 3D dengan Spline dan Framer

Spline 3DPemula14 min

Hai! Dalam tutorial ini, anda akan belajar cara mencipta laman web 3D menggunakan adegan kaca 3D yang dibuat dalam Spline dan menyepadukannya ke dalam Framer (pembina web) untuk mencipta dan menerbitkan laman web yang berfungsi sepenuhnya. Lihat Spline: <https://spline.design/> Laman Demo: <https://healthy-others-546063.framer.app/> Ikuti Spline: <https://instagram.com/splinetool/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=0s)
2. [0:33Mencipta sfera](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=33s)
3. [1:40Menambah bahan](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=100s)
4. [2:52Membuat kaca](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=172s)
5. [7:50Mengeksport adegan 3D daripada Spline](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=470s)
6. [8:26Mengimport adegan 3D ke dalam Framer](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=506s)
7. [10:00Melaraskan komposisi laman web](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=600s)
8. [11:30Menambah Orbit semasa hover](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=690s)
9. [12:25Pelarasan akhir](https://www.youtube.com/watch?v=8bqkvfRuFYk&t=745s)

## Gambaran keseluruhan

- Spline 3D
- 14 min
- Pemula

## Tutorial berkaitan

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

[Cara Menambah Interaksi Follow pada Objek 3DSpline 3DPemula6 min](https://spline.design/ms/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Reka Bentuk Kiub Kaca dalam 3DSpline 3DPemula11 min](https://spline.design/ms/academy/tutorials/design-a-glass-cube-in-3d)[Cipta Animasi Tatal 3D & Sepadukan ke dalam FramerSpline 3DPemula12 min](https://spline.design/ms/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

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

Editor 3D dan 2D untuk pasukan dan ejen mereka. Terbitkan ke web, iOS dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Reka Bentuk 3D](https://spline.design/ms/3d-design)
- [Hana](https://spline.design/ms/hana)
- [Omma](https://omma.build)
- [Penjanaan 3D AI](https://spline.design/ms/ai-generate)
- [Spline MCP](https://spline.design/ms/mcp)
- [Spline Arena](https://spline.design/ms/arena)
- [Harga](https://spline.design/ms/pricing)
- [Perusahaan](https://spline.design/ms/enterprise)

#### Runtime

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

#### Aplikasi

- [Muat Turun](https://spline.design/ms/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Muat turun Spline Mirror](https://spline.design/download-mirror)

#### Belajar

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

#### Komuniti

- [Komuniti Spline](https://community.spline.design)
- [Blog](https://spline.design/ms/blog)
- [Log Perubahan](https://spline.design/ms/changelog)
- [Pendidikan](https://spline.design/ms/education)
- [Contra](https://spline.design/contra)
- [Afiliat](https://spline.design/ms/affiliate)

#### Syarikat

- [Pelanggan](https://spline.design/ms/customers)
- [Kerjaya](https://www.ycombinator.com/companies/spline/jobs)
- [Keselamatan](https://spline.design/ms/security)

#### Undang-undang

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

#### Hubungi

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

© 2026 - Spline, Inc.