Try this 3D Animation Trick on your Portfolio

-- Today, I'm going to show you how to import any 3D object (.gltf format) and animate it based on scroll position. It's a cool effect, and one that you can customize to suit your own needs.

Project files:

Threeasy:

Free GLTF 3D models:

The model referenced:

Let's get started!

#threejs #animation

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[deepak]

Thanks so much scroll based threejs was not there before on youtube this is awesome!!

[sickquence]

i have done that tutorial and now i would be very happy to learn how to add texure and lightning to my GLTF scene.

[dannymorgan]

I think Threeasy is great here but I have to say nothing touches A-Frame for me. 3D entities right there in your HTML with (literally) no javascript boilerplate, and you manipulate them with setAttribute directly on the element you want to move. Handles AR and VR too!

Definitely worth a look if you're not aware of it already.

[UmairUlhaque]

I was looking for similar interaction after I experienced the web design of House of Gucci by an amazing frontend developer Aristide Benoist. As we can see there is a golden key that rotates in 3D in response to the vertical scroll. Thanks a lot Gary, for making things easier to learn for us.

[thevasupodcast]

I love your videos. Can you make a video on designing for devs. Or maybe a portfolio build video

[chocolateimage]

i think it is better to have the object behind the text or transparent, else you can't read it

[LoreCraftForge]

Is there a way you could position it, say on the left hand side to stay within the padding-left of whatever text or content?

[blackpurple]

That's great, threejs is overwhelming for me, this makes it a lot easier, thank you.
Is there a way to make my object follow the cursor or touch input (like a finger or stylus) with a small delay? Like when I move the cursor, the small object (like a Pacman image) follows it like it's trying to eat my cursor

[kushagra-aa]

Can anyone please suggest me good course or video for threeJS and GSAP,
I do not want to master them just know basics and simple stuff.

[vampiroast]

Does using 3D objects affect performance? or depends on the file size?.