Build a 3D Light Switch with Interaction

Build a 3D Light Switch with Interaction

In this tutorial, we will revisit the idea of a toggle interaction using the new feature 'Toggle' available in Mouse and Key events.

This feature makes it easier to create toggle effects with a single event.

Live version: https://my.spline.design/switchtutorial-70a23dd070513899912c011c202b0368/

#making#switch#toggle#spline#3d#tutorial#3d modeling#interactive 3d#materials#animation#interaction#tutorial-interaction#tutorial-ui-design#tutorial-product

What you'll learn

  • 0:00Introduction
  • 0:55Creating the base of the switch
  • 3:00Creating the switch shape
  • 7:20Adding the switch border
  • 8:40Adding the mouse toggle event
  • 9:55Final details

Related resources

Overview

Spline 3D
12min
Intermediate
Similar Tutorials
Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Spline V2 Full Tour: New Layout, Faster Creation, Agent Workflow

Video9minBeginner
Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Build Interactive Animations: Morphing UI & Reactive Glow in Hana (Step by Step)

Video13minBeginner
How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

How to add a 3D Drag & Drop interaction in Spline | Level up your website in just a few clicks

Video4minBeginner