# Tambah Interaksi Berasaskan Tetikus pada Objek 3D - Spline Academy (https://spline.design/ms/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

> Ketahui cara anda boleh mencipta interaksi dengan mudah dengan menjadikan elemen 3D bertindak balas terhadap kursor anda!

1. [Academy](https://spline.design/ms/academy)
2. [Tutorial](https://spline.design/ms/academy/tutorials)
3. Tambah Interaksi Berasaskan Tetikus pada Objek 3D

# Tambah Interaksi Berasaskan Tetikus pada Objek 3D

Spline 3DPemula14 min

Ketahui cara anda boleh mencipta interaksi dengan mudah dengan menjadikan elemen 3D bertindak balas terhadap kursor anda!

Panduan ini direka untuk pemula, memastikan pengenalan yang mudah diikuti tentang konsep-konsep ini.

Kami menunjukkan kekuatan peristiwa tetikus dalam meningkatkan reka bentuk 3D, seperti peristiwa mouse up, down, press dan hover. Kami juga menunjukkan cara mencipta pengalaman interaktif dengan memautkan peristiwa tetikus kepada tindakan seperti perubahan warna, saiz dan animasi, serta pergerakan kamera dan banyak lagi!

Lihat tutorial lain ini untuk lebih banyak tentang peristiwa tetikus! <https://youtu.be/pR2AhQ22KwM> <https://youtu.be/eCxLYk2rNzg> <https://youtu.be/hRy-Iqle6EU> <https://youtu.be/RmC2xEtXobE> <https://youtu.be/lJIDSiDlhvw>

\---

Temui lebih ramai pencipta dan projek hebat #MadeInSpline di <https://community.spline.design/>

## Apa yang akan anda pelajari

1. [0:00Pengenalan](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=0s)
2. [0:29Memahami Peristiwa Tetikus](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=29s)
3. [1:42Mencipta Interaksi Mouse Down Ringkas](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=102s)
4. [5:02Tukar warna apabila diklik](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=302s)
5. [6:03Butang interaktif dan pertukaran warna](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=363s)
6. [8:47Interaksi klik dengan perubahan kedudukan kamera](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=527s)
7. [10:54Menambah Kesan Bunyi](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=654s)
8. [12:01Meneroka Tindakan Create Object](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=721s)
9. [12:20Menambah URL untuk membuka laman web apabila diklik.](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=740s)

## Sumber berkaitan

- [Mouse Hover EventTemplat](https://app.spline.design/academy/tutorials/add-mouse-based-interactions-to-3d-objects?redirect-duplicate-template-uuid=267cdcd9-2272-426a-9b67-4028d2c1d024&is-2d-file=false)
- [How state-based animation worksDokumen](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Events & InteractivityDokumen](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [EventsDokumen](https://docs.spline.design/#events)
- [ActionsDokumen](https://docs.spline.design/#actions)

## Gambaran keseluruhan

- Spline 3D
- 14 min
- Pemula

## Sebahagian daripada

- [Spline 101 | Bina Adegan Interaktif Pertama Anda](https://spline.design/ms/academy/collections/spline-101-build-your-first-interactive-scene/add-mouse-based-interactions-to-3d-objects)

## Tutorial berkaitan

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

[Cipta Reka Bentuk Interaktif yang Bertindak Balas terhadap Tetikus Anda dengan HanaHanaPemula6 min](https://spline.design/ms/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[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 Visualisasi Data 3D dalam Spline Menggunakan Pemboleh Ubah dan API Masa NyataSpline 3DLanjutan15 min](https://spline.design/ms/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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