# Cipta Watak Lebah Interaktif untuk Web - Animasi & Interaksi dalam Spline - Spline Academy (https://spline.design/ms/academy/tutorials/create-an-interactive-bee-character-for-the-web)

> Selamat kembali! 🙌 Dalam tutorial video ini, kami akan menunjukkan cara mencipta pengalaman interaktif menggunakan watak lebah yang comel. Lihat Spline:…

1. [Academy](https://spline.design/ms/academy)
2. [Kursus](https://spline.design/ms/academy/collections)
3. [Animasi & Interaksi dalam Spline](https://spline.design/ms/academy/collections/animation-interactions-in-spline)
4. Cipta Watak Lebah Interaktif untuk Web

# Cipta Watak Lebah Interaktif untuk Web

Pelajaran 8 daripada 14Spline 3DPertengahan14 min

Selamat kembali! 🙌 Dalam tutorial video ini, kami akan menunjukkan cara mencipta pengalaman interaktif menggunakan watak lebah yang comel. Lihat Spline: <https://spline.design/>

Anda akan belajar cara mencipta animasi berulang untuk sayap dan mata lebah serta melaksanakan kesan peralihan interaktif yang menjadikan elemen bergerak atau muncul di skrin apabila butang diklik menggunakan peristiwa Mouse Down.

Muat turun Lebah 3D ini dan ikuti tutorial.

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

Ketahui lebih lanjut tentang peristiwa interaktif dengan menyemak Dokumentasi Spline! 📘 <https://docs.spline.design/>

Selamat belajar!

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=0s)
2. [0:38Mencipta Animasi Sayap Berulang](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=38s)
3. [2:44Menambah Mata yang Berkelip](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=164s)
4. [4:13Mencipta Kesan Peralihan dengan Butang (Peristiwa Mouse Down)](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=253s)
5. [11:53Menyediakan Kamera dan Mengeksport untuk Laman Web](https://www.youtube.com/watch?v=hRy-Iqle6EU&t=713s)

## Sumber berkaitan

- [Bee - UI interactionTemplat](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)

## Gambaran keseluruhan

- Spline 3D
- 14 min
- Pertengahan

## Seterusnya

[Cara Membina Interaksi Seret & Lepas dalam 3D10 minPemula](https://spline.design/ms/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)[Teruskan](https://spline.design/ms/academy/collections/animation-interactions-in-spline/how-to-build-drag-drop-interactions-in-3d)

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