# Membuat Karakter Lebah Interaktif untuk Web - Animasi & Interaksi di Spline - Spline Academy (https://spline.design/id/academy/tutorials/create-an-interactive-bee-character-for-the-web)

> Selamat datang kembali! 🙌 Dalam video tutorial ini, kami akan menunjukkan cara membuat pengalaman interaktif dengan karakter lebah yang menggemaskan. Coba…

1. [Academy](https://spline.design/id/academy)
2. [Kursus](https://spline.design/id/academy/collections)
3. [Animasi & Interaksi di Spline](https://spline.design/id/academy/collections/animation-interactions-in-spline)
4. Membuat Karakter Lebah Interaktif untuk Web

# Membuat Karakter Lebah Interaktif untuk Web

Pelajaran 8 dari 14Spline 3DMenengah14 mnt

Selamat datang kembali! 🙌 Dalam video tutorial ini, kami akan menunjukkan cara membuat pengalaman interaktif dengan karakter lebah yang menggemaskan. Coba Spline: <https://spline.design/>

Anda akan belajar membuat animasi berulang untuk sayap dan mata lebah, serta menerapkan efek transisi interaktif yang membuat elemen bergerak atau muncul di layar saat tombol diklik, dengan event Mouse Down.

Unduh lebah 3D ini dan ikuti tutorialnya.

🐝 Remix: <https://app.spline.design/file/68152128-3ac0-4fdd-a941-1cdcbe075c43>

Pelajari lebih lanjut tentang event interaktif di Spline Docs! 📘 <https://docs.spline.design/>

Selamat belajar!

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=0s)
2. [0:38Membuat animasi sayap yang berulang](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=38s)
3. [2:44Menambahkan mata yang berkedip](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=164s)
4. [4:13Membuat efek transisi dengan tombol (event Mouse Down)](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=253s)
5. [11:53Menyiapkan kamera dan mengekspor untuk situs web](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=713s)

## Sumber terkait

- [Bee - UI interactionTemplate](https://app.spline.design/academy/tutorials/create-an-interactive-bee-character-for-the-web?redirect-duplicate-template-uuid=21a2a3bb-b549-405f-88b0-b0269a8f2390&is-2d-file=false)
- [How state-based animation worksDokumen](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDokumen](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Transition ActionDokumen](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Ikhtisar

- Spline 3D
- 14 mnt
- Menengah

## Berikutnya

[Cara Membuat Interaksi Drag & Drop dalam 3D10 mntPemula](https://spline.design/id/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)[Lanjutkan](https://spline.design/id/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)

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