# Cara Membina Bola 3D Reaktif dengan Gerakan dan Interaksi - Spline Academy (https://spline.design/ms/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Hari ini, kami akan menunjukkan cara mencipta bola 3D interaktif berinspirasikan teknologi ini menggunakan cloner dan peristiwa tetikus dalam Spline, sesuai…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Cara Membina Bola 3D Reaktif dengan Gerakan dan Interaksi

# Cara Membina Bola 3D Reaktif dengan Gerakan dan Interaksi

Spline 3DPertengahan7 min

Hari ini, kami akan menunjukkan cara mencipta bola 3D interaktif berinspirasikan teknologi ini menggunakan cloner dan peristiwa tetikus dalam Spline, sesuai untuk sebarang projek web seperti landing page, pameran produk atau apa jua projek reka bentuk yang anda suka.

Adegan ini dibuat oleh Vlad Kolokolnikov, lihat komuniti Spline untuk mencari adegan ini dan lebih banyak adegan 3D lain yang percuma untuk diadun semula.

Demo: <https://app.spline.design/community/file/306ca2a5-d1ab-46ac-a27c-198575c82db0>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Mencipta objek asas dan menambah bahan](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Menggunakan Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Menambah peristiwa Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Menambah peristiwa Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Memperkemas animasi](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Menganimasikan kumpulan cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Reka bentuk akhir](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Petua eksport](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Penutup](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Sumber berkaitan

- [Reactive OrbTemplat](https://app.spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction?redirect-duplicate-template-uuid=684c8aec-6fec-4d6b-ae37-a3a1fd5fac27&is-2d-file=false)
- [Cloner MotionDokumen](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [How state-based animation worksDokumen](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Materials & ShadingDokumen](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Gambaran keseluruhan

- Spline 3D
- 7 min
- Pertengahan

## Sebahagian daripada

- [Spline Lanjutan | Menyelami Ciri](https://spline.design/ms/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Tutorial berkaitan

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

[Cara Mencipta Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Cipta Bahan Liquid Glass dalam 3DSpline 3DPemula12 min](https://spline.design/ms/academy/tutorials/create-liquid-glass-materials-in-3d)[Cipta Suis Interaktif dengan Progressive Blur dan GradienHanaPemula4 min](https://spline.design/ms/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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