# Cipta Watak Lebah Interaktif untuk Web - 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. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Cipta Watak Lebah Interaktif untuk Web

# Cipta Watak Lebah Interaktif untuk Web

Spline 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

## Sebahagian daripada

- [Animasi & Interaksi dalam Spline](https://spline.design/ms/academy/collections/animation-interactions-in-spline/create-an-interactive-bee-character-for-the-web)

## Tutorial berkaitan

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

[Cara Membina Bola 3D Reaktif dengan Gerakan dan InteraksiSpline 3DPertengahan7 min](https://spline.design/ms/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Cara Mencipta Interaksi Karusel 3DSpline 3DLanjutan16 min](https://spline.design/ms/academy/tutorials/how-to-create-a-3d-carousel-interaction)[Hidupkan Robot 3D InteraktifSpline 3DPemula13 min](https://spline.design/ms/academy/tutorials/bring-an-interactive-3d-robot-to-life)

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