# Hidupkan Robot 3D Interaktif - Spline Academy (https://spline.design/ms/academy/tutorials/bring-an-interactive-3d-robot-to-life)

> Hai! 👋 Kali ini kami bersedia untuk berseronok dan menunjukkan pelbagai cara untuk membawa watak 3D ke tahap seterusnya dengan menjadikannya interaktif!…

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Hidupkan Robot 3D Interaktif

# Hidupkan Robot 3D Interaktif

Spline 3DPemula13 min

Hai! 👋 Kali ini kami bersedia untuk berseronok dan menunjukkan pelbagai cara untuk membawa watak 3D ke tahap seterusnya dengan menjadikannya interaktif! Lihat Spline: <https://spline.design/>

Anda akan belajar cara menjadikan robot comel ini mengikut kursor anda, menukar ekspresi atau warnanya dengan satu klik, dan banyak lagi!

Sesuatu yang boleh anda sepadukan dengan mudah ke dalam projek atau laman web anda, tanpa kod ;)

Gunakan mana-mana watak yang anda suka, atau anda juga boleh memuat turun watak ini dan mengikuti tutorial.

🤖 Adun semula: <https://app.spline.design/file/f09aef0f-3b4e-436e-a05a-e97945e2490a>

Selamat belajar!

Interaksi pada 10:44 diilhamkan oleh Gaurav Kallugadde (@gaurav\_paints) ❤️

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=0s)
2. [0:37Jadikan Watak Anda Menghadap Kursor - Peristiwa Look At](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=37s)
3. [1:34Interaksi Mouse Hover](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=94s)
4. [3:26Interaksi Mouse Press & Mouse Down](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=206s)
5. [4:45Tukar Warna Watak Anda](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=285s)
6. [10:44Tukar Ekspresi Muka](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=644s)
7. [12:27Game Controls](https://www.youtube.com/watch?v=JPUSjRxQEKI&t=747s)

## Sumber berkaitan

- [Robot Interactive EventsTemplat](https://app.spline.design/academy/tutorials/bring-an-interactive-3d-robot-to-life?redirect-duplicate-template-uuid=83094eb4-8202-4a49-894e-75e435da5f82&is-2d-file=false)
- [How state-based animation worksDokumen](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Look At EventDokumen](https://docs.spline.design/interaction-states-events-and-actions/events/look-at-event)
- [Mouse Down EventDokumen](https://docs.spline.design/interaction-states-events-and-actions/events/mouse-down-event)

## Gambaran keseluruhan

- Spline 3D
- 13 min
- Pemula

## Sebahagian daripada

- [Animasi & Interaksi dalam Spline](https://spline.design/ms/academy/collections/animation-interactions-in-spline/bring-an-interactive-3d-robot-to-life)

## Tutorial berkaitan

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

[Cara Mencipta Interaksi Karusel 3DSpline 3DLanjutan16 min](https://spline.design/ms/academy/tutorials/how-to-create-a-3d-carousel-interaction)[Cipta Watak Lebah Interaktif untuk WebSpline 3DPertengahan14 min](https://spline.design/ms/academy/tutorials/create-an-interactive-bee-character-for-the-web)[Animasikan Kotak 3D InteraktifSpline 3DPertengahan4 min](https://spline.design/ms/academy/tutorials/animate-interactive-3d-boxes)

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