Build a 3D Animated Cube using Three.js, Next.js and Framer Motion

A web animation featuring a 3D cube, animated on scroll, mouse move and on drag, using Three.js, react three fiber, Next.js and Framer Motion.
Demo / Source code: blog.olivierlarose.com/tutori...
00:00 Intro
00:24 Cube Geometry
4:55 Cube Texture
7:07 Drag Gesture
8:20 Mouse Move Gesture
12:38 Scroll Gesture
15:18 Scroll Gesture with Framer Motion
18:47 Outro
More animations: blog.olivierlarose.com/
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion #svg #morph

[@jonzer3028]

Man, I’m honestly so happy I found your channel.
This (and your other videos) are the exact type of projects I am trying to get better at building.
Thank you!

[@olivierlarose1]

Glad I could help!🤝

[@voldemortvi4264]

thank you for taking the time to make such a tutorial !

[@olivierlarose1]

My pleasure🤝

[@AliyAkhbar]

Awesome as always 😊

[@olivierlarose1]

Thanks!

[@Deus-lo-Vuilt]

Thanks for the videos of react, nextjs and framer motion, I hope you upload more so I can learn a hug

[@olivierlarose1]

Yes sir🤝💯

[@leonardocarvalho4111]

🔥🔥🔥🔥 You're content is amazing! Thank You so much
.

[@olivierlarose1]

Appreciate it!🔥

[@nellymotion]

Thank you so much for the tutorial !!

[@olivierlarose1]

😂🤝

[@user-qc9sw4ew3l]

Thank you for teaching all these for free 🥳amazing content

[@rodrigosalmeron7216]

Once again a great video explained incredibly easy. That's pure talent bro, every week im waiting for a new video. Keep going on the three js approaches with framer motion or even with gsap. Respect bro 🥳🥳🥳

[@olivierlarose1]

Hey man that means a lot thank you🤝

[@bjgjuiuguoojpoo]

AWESOME! It is all that I literally need at this moment! :) Thanks Bro! :)

[@olivierlarose1]

Pleasure!🤝

[@NeCo-uu6nk]

Thank you! I couldn't build THREE.js on next.js, but now I can.

[@eduardosantos3516]

Very good, amazing!!

[@olivierlarose1]

Thanks!

[@berkeylmaz4488]

This is an amazing video man. GG's

[@olivierlarose1]

Appreciate it!

[@user-uk1bx9vm4o]

Very well explained 🙌

[@olivierlarose1]

Thanks!

[@user-zg8eg1jg8o]

Thank You !!! At last I am going to learn some ThreeJs.

[@yohnnyy]

Thanks for this!!!

[@olivierlarose1]

😂💯

[@hamedbahram]

Super slick! love your content Oli!

[@olivierlarose1]

Appreciate it! You’re doing great work on your side too💯

[@hamedbahram]

@@olivierlarose1 Thanks! Would you like to collaborate?

[@SheriffKoder9]

Thanks a lot my friend ! this video helped me a lot

[@olivierlarose1]

My pleasure

[@mazwrld]

yo this is so sick thanks! ive a cool use case for this

[@olivierlarose1]

💯

[@abricoshka]

Thank you. Your content is unique! I didn't find any videos with three.js and next.js.

[@olivierlarose1]

Glad you liked it!

[@Houseofstartup]

Thank you so much

[@olivierlarose1]

Cheers!

[@sohambhosale5780]

Once again osm video bro♥

[@olivierlarose1]

👊🤝

[@HuynhLuong227]

thanks for sharing, hope see you next video.

[@olivierlarose1]

Yes sir💯

[@soyelchicodelanus8471]

GRACIAS!! You are the best!

[@olivierlarose1]

My pleasure🤝

[@_codesan]

thanks for sharing, you great bang

[@olivierlarose1]

🤝

[@codebymohsine]

it's fire bro 🔥🔥🔥

[@olivierlarose1]

Let’s goo🔥🔥

[@user-ju1iz5jb2y]

Hello Oli, I use Angular and I had to learn react to understand what you do and thus migrate all the components that I like to Angular, I hope I can do this too. I recently joined your discord, I am very happy to learn from your videos. Thanks for sharing this content

[@olivierlarose1]

Happy to hear that💯 enjoy!

[@unhealthytomato3219]

Extremely underrated

[@FarhanAhmed1360]

Nice 👍

[@user-ik8ez8mw4j]

guy you really deserve millions of subscribers i found your channel accidentally but u subscribe your channel because your content are spectacular

[@olivierlarose1]

Glad I could help!

[@chrisw.1252]

dope!

[@olivierlarose1]

Lets go🔥

[@lucho1695]

Thank you so much for your works! Your channel is a real gem! By any chance could you make a tutorial or give us some insights how to make smooth transitions between pages with meshes. E.g on /works page select a plane, play some fancy async animations and then seamlessly navigate to /works/:id. I would really love to see your approach on this.

[@olivierlarose1]

Noted!✍️

[@expl0de100]

Wow, You are explaining everything You do very clearly! Also good pace of the tutorial. I dont have to speed it up to 1.25 or 1.5 like others :D

[@olivierlarose1]

Glad you liked it!

[@DMZT_dhruv]

man you deserve 1 million+ subscribers

[@olivierlarose1]

Thanks for the support

[@andrewii23]

I want road map to study to be like you 😢

[@olivierlarose1]

Soon💯

[@sahadevdahit]

❤❤❤❤❤ brother

[@taszidizaz4079]

First comment. Thanks as always ❤

[@olivierlarose1]

Cheers!

[@dorji-dev]

Thank you so much for the content. I also want ask if it is possible to progressively draw the cube as the user scrolls starting from a square structure and slowly transition to cube as well? Initially as the user scrolls, the user should see a line which represents the cube vertex which progresses and the next vertex and after four vertex should slowly rotate transitioning to a cube. I wonder if it is possible and will give it a go. Your response will be much appreciated!

[@v.demchenko]

😎cool

[@olivierlarose1]

🤝

[@leiyin5512]

hi bro! thank you. By the way, may I ask if you have any good ways to learn web 3D development?

[@ashuu9257]

When is the course coming, eagerly waiting!!!!!

[@olivierlarose1]

Working on it right now💯

[@ruizxzx]

!!once again

[@olivierlarose1]

👊👊

[@cjlebios4900]

Man what a timing Vid, I'm currently frustrated in learning to add 3d models into Nextjs. any tips?

[@olivierlarose1]

Really? How come? Personall7 difficulty I had was using React Suspense and I fixed it using next Dynamic import

[@ha-rrykim2147]

By any chance did anyone have issues with images? unable to render them. I'm getting an runtime error for images. `Uncaught Error: Could not load [object Object]: undefined` I
Thanks Olivier for the tutorial!~

[@himanshukamal1]

can you show a typescript version also. I am getting too many errors

[@GameDevForLife]

did someone have the problem with saas even when installing it it still don't work

[@keymoment]

Could you create a portfolio website I want to learn Three.js from these channels.

[@olivierlarose1]

Yes for sure💯

[@mazwrld]

hol up why does it change the saturation of assets?? like it's doing something to the images

[@olivierlarose1]

Yes the Plaiceholder library actually applies an edit on the images, but all of that is adjustable if you look at the docs. Enjoy

[@mazwrld]

4:46 no prettier is itching me

[@olivierlarose1]

😅