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

> Hari ini, kami akan menunjukkan cara membuat bola 3D interaktif bernuansa teknologi ini dengan cloner dan mouse event di Spline, cocok untuk berbagai proyek…

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

# Cara Membuat Bola 3D Reaktif dengan Gerakan dan Interaksi

Spline 3DMenengah7 mnt

Hari ini, kami akan menunjukkan cara membuat bola 3D interaktif bernuansa teknologi ini dengan cloner dan mouse event di Spline, cocok untuk berbagai proyek web seperti landing page, etalase produk, atau proyek desain apa pun yang Anda suka.

Scene ini dibuat oleh Vlad Kolokolnikov. Kunjungi komunitas Spline untuk menemukan scene ini dan scene 3D lainnya yang bebas di-remix.

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

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Membuat objek dasar dan menambahkan material](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Memakai Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Menambahkan event Follow](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Menambahkan event Distance](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Memoles animasi](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Menganimasikan grup cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Desain akhir](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Tips ekspor](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Penutup](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Sumber terkait

- [Reactive OrbTemplate](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)

## Ikhtisar

- Spline 3D
- 7 mnt
- Menengah

## Bagian dari

- [Spline Tingkat Lanjut | Mendalami Fitur](https://spline.design/id/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Tutorial terkait

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

[Cara Membuat Visualisasi Data 3D di Spline dengan Variabel dan API Real-TimeSpline 3DLanjutan15 mnt](https://spline.design/id/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Membuat Material Liquid Glass dalam 3DSpline 3DPemula12 mnt](https://spline.design/id/academy/tutorials/create-liquid-glass-materials-in-3d)[Membuat Switch Interaktif dengan Progressive Blur dan GradienHanaPemula4 mnt](https://spline.design/id/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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