How to Create Interactive 3D Boxes in Spline

Hey there! In this tutorial, we're going to have some fun learning how to whip up an interaction where, as you move your cursor over multiple cubes, they playfully adjust their positions and switch up their colors.
And it will take us less than 5 minutes! 👀
Check Spline: spline.design/
Remix 👉 app.spline.des...
Share your version in our community at community.spli...
We can't wait to see it 🤩
Happy learning!
00:00 Introduction
00:12 Creating a cube
00:31 Adding colors and Materials
01:29 Adding Depth
01:56 Creating Mouse Hover Interaction
02:39 Cube duplication
04:00 Export options and Community inspiration

[@rohana403]

Awesome!! Great tutorial clear instructions!

[@petenicholson3255]

Great explanation. Much appreciated!

[@misterhs5511]

This is art, magnificent

[@Hex_html]

Awesome app! Thanks for tutorial!

[@Svetlana-hk3mm]

Thank you!

[@ValeFero]

Just wow!! Three js is cool but this is much faster!!

[@good_vibes_20]

What would you say are the benefits? Sorry I'm new and learning and would love to hear more on what you think on the differences of these.

[@wata1991]

@@good_vibes_20 try coding this example and threejs and you will see for yourself

[@MarkosEvans]

soooo coool. Great explanation

[@paul.martens]

You had me at “zed”. 🇨🇦

[@nickyhopeless]

Thank you so much!

[@evelynwagner3923]

Great, thank you! I'm trying to add text to the moved up box, can anyone help?

[@hermannrudas]

Vielen Dank !

[@MikeMiller-z9o]

Is it possible to morph the square into a circle?

[@amurtigro366]

thankyou so much for this guide

[@MikeMiller-z9o]

In the second state is it possible to change cube into circle? Trying to create a simple cube that morphs into a circle. Does not need to be interactive either.

[@____Daniel____]

WOOOOOOOOOOOOOOW

[@tOnK666]

Do you know why matcap value change in first stage after I change it the second stage?

[@Walking_W]

why does it not allow me to move the depth layer?

[@tumb1ew2ed99]

Fine!

[@rezmathers6387]

if it is used as a background as shown in web .... the foreground elements no longer allow the hover to affect the background in react . please reply . need help

[@splinetool]

If your website has elements on top of the 3d canvas, and you don't want these elements to interrupt your 3d hover effect, then you need the disable the pointer events on these elements (either with your web builder or via CSS).

[@MACH_SDQ]

Just like that ooooooo its worht it !!!!!!!!

[@user32352]