# Add Mouse-Based Interactions to 3D Objects - Spline Academy (https://spline.design/academy/tutorials/add-mouse-based-interactions-to-3d-objects)

> Learn how you can easily create interactions by making 3D elements react to your cursor!

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Add Mouse-Based Interactions to 3D Objects

# Add Mouse-Based Interactions to 3D Objects

Spline 3DBeginner14 min

Learn how you can easily create interactions by making 3D elements react to your cursor!

This guide is designed for beginners, ensuring an easy-to-follow introduction to these concepts.

We demonstrate the power of mouse events in enhancing 3D designs, such as mouse up, down, press, and hover events. We also showcase how to create interactive experiences by linking mouse events to actions like color, size, and animation changes, as well as camera movement and more!

Check out these other tutorials for more on mouse events! <https://youtu.be/pR2AhQ22KwM> <https://youtu.be/eCxLYk2rNzg> <https://youtu.be/hRy-Iqle6EU> <https://youtu.be/RmC2xEtXobE> <https://youtu.be/lJIDSiDlhvw>

\---

Discover more amazing creators and projects #MadeInSpline at <https://community.spline.design/>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=0s)
2. [0:29Understanding Mouse Events](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=29s)
3. [1:42Creating Simple Mouse Down Interaction](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=102s)
4. [5:02Change color on click](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=302s)
5. [6:03Interactive buttons and color change](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=363s)
6. [8:47Click interaction with camera position change](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=527s)
7. [10:54Adding Sound Effects](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=654s)
8. [12:01Exploring Create Object Action](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=721s)
9. [12:20Adding a URL to open a website on click.](https://www.youtube.com/watch?v=rdZrrXFLxuw&t=740s)

## Related resources

- [Mouse Hover EventTemplate](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 worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Events & InteractivityDocument](https://docs.spline.design/interaction-states-events-and-actions/events-interactivity)
- [EventsDocument](https://docs.spline.design/#events)
- [ActionsDocument](https://docs.spline.design/#actions)

## Overview

- Spline 3D
- 14 min
- Beginner

## Part of

- [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/add-mouse-based-interactions-to-3d-objects)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Create Interactive Designs That React to Your Mouse with HanaHanaBeginner6 min](https://spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[How to Build a Reactive 3D Orb with Motion and InteractionSpline 3DIntermediate7 min](https://spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIsSpline 3DAdvanced15 min](https://spline.design/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[Spline](https://spline.design/)

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

- [Web](https://spline.design/web)
- [iOS](https://spline.design/ios)
- [Android](https://spline.design/android)

#### Apps

- [Download](https://spline.design/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Download Spline Mirror](https://spline.design/download-mirror)

#### Learn

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solutions](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/blog)
- [Changelog](https://spline.design/changelog)
- [Education](https://spline.design/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/affiliate)

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.
