Interactive 3D in Webflow with React Three Fiber + CodeSandbox

For a long time mixing real, interactive 3D and Webflow was just a dream for me. But I finally decided to get my hands dirty and finally learn a bit of ThreeJS and React Three Fiber - a React library that makes creating 3D scenes with ThreeJS a lot easer!
On this video I'll show you how I created my latest Webflow cloneable - Flowboard - from beginning to end. We'll go over:
- Setting up your scene in Blender
- Exporting to GLTF
- Using CodeSandbox Cloud
- The code behind all the animations and interactions
- How to include the 3D animation into Webflow
Chapters
00:00:00 Intro
00:00:53 Things to keep in mind
00:03:15 The Flowboard landing page
00:05:03 How to add WebGL in Webflow
00:08:12 Step 1 - Blender
00:20:32 Step 2 - GLTF to JSX
00:24:21 Step 3 - CodeSandbox
00:25:43 CodeSandbox cloud template
00:28:54 HTML, React, R3F and GSAP
00:59:23 Step 4 - Webflow
01:02:20 Conclusion
Useful Links
- Webflow cloneable: webflow.com/made-in-webflow/w...
- CodeSandbox template: codesandbox.io/p/sandbox/flow...
- GLTF to JSX converter: gltf.pmnd.rs/
- React Three Fiber: docs.pmnd.rs/react-three-fiber/
- Drei library for R3F: github.com/pmndrs/drei
- GSAP + React docs: greensock.com/react/
- Color converter (from hex to RGB in percent): convertingcolors.com/
- Lenis: lenis.studiofreight.com/
- Lenis tutorial for Webflow: • The BEST smooth scroll...
- Timothy Ricks’ cloneable for GSAP text effects: webflow.com/made-in-webflow/w...

[@yunholing6119]

Building a web for myself, as a beginner who barely knows js, you saved me!

[@eupston]

Such a great and innovative stack. Thank you Diego for exploring and sharing this option!

[@fredachang9244]

thank you so much for sharing this resource! this is exactly what i was looking for in Webflow as I already know how to make my own three js from scratch and wasn't sure whether its possible to do it on webflow

[@skylartkitchen]

Amazing work, Diego. Thank you for sharing this with the world!

[@dieg0liv]

Thanks Skylar, glad you like it!

[@benfraser209]

You're the man, Diego!

[@ZaoSky]

Awesome! A lot of Thanks!

[@imnothin]

Subscribed! Very detail, thank you.

[@vihanga_n]

Thank you !

[@RahulYadav-yg6zh]

Sick Content Man! Please keep uploading more

[@dieg0liv]

Thanks, appreciate that!

[@edelprojects8308]

thank you!

[@BenNoCode]

Genius !!!

[@lionmike247]

you are killing it bro! this content is insane. Appreciate your time and dedication. I love seeing blender 3d and the web work together. Is there anything we should be on the lookout for regarding the new web Gpu update that recently came out? will that change how 3d models will be getting rendered? im looking forward to the day when we can render Cycles like content on the web. Wish the web was able to handle better graphics

[@lionmike247]

also, is there a huge performance hit when rendering a 3d video rather than using React fiber? Since i would love to render out some 3d cycles videos i made before, i was wondering how efficient that route would be in comparison. that would be a cool video as well to see how we can optimize and make a website dynamic with that way!

[@dieg0liv]

WebGPU is still too early in terms of browser support but it's growing steadily. That said, I don't think it will replace WebGL in the next year or two. But it definitely has some potential to be the new standard in around 3-5 years in my opinion. I haven't dived too much into it to make a proper comparison between WebGL and WebGPU, but it's on the plans, stay tuned.

[@dieg0liv]

@@lionmike247 There's no right or wrong answer for this. It really depends on several factors. The more realistic is your rendering, the more it makes sense to render either a video or a sequence of images and use JavaScript + html canvas to play the sequence (something similar to what I showed on my 3D + Lottie tutorial, but on a larger scale). That said, depending on how long your animation is, and the level of realism, loading a .gltf and rendering it with R3F might be faster. BUT, keep in mind that, the more complex the scene is, the worse performance can get - specially on mobile devices. There's also the interactivity factor. You can't make a video interactive like you can with ThreeJS + R3F. For example, clicking on the key caps or the dial on this tutorial.

[@lionmike247]

@@dieg0liv thank you Diego I appreciate your response and insight big time!! That all makes sense, great explanation. I appreciate your time, you are going to keep killing it!! Love your work and your eye for design. Looked through your portfolio!

[@joaosaraiva9495]

Great video! Can you please explain how you created the neon effect? Was it just by adding the Bloom post processing effect or did you have to add it in blender, un wrap it and bake the texture, before using it in R3F?

[@dieg0liv]

Hey João! So basically, when you set the "luminanceThreshold" attritube to the passes to 1, you're saying "any material that has a color with one of the channels higher than 1 should have the bloom effect". With that, we don't need any textures or anything coming from Blender. All we need is a basicMaterial with a flat color. If you check the video at 47:16, I show the RGB channels I had set up for the baseNeon material. You will notice that one of the channels has it's value exaggerated and way above 1. That's how you select material to have the Bloom effect with this setup. Keep in mind that, if you do that, you will have to play with the other channel values to get the shade of color you want for the material. So start with the base RGB color you want, then pick one of the channels that makes more sense to put above 1 (on this case the B channel made sense), and start playing with the numbers until you get the result you want. At least that's how I got this result.🙂

[@malickgm507]

This is awesome but a bit advanced but still, I didn't get the part like how did you play the embedded keyframes in your model on scroll? I have figured out the animation play but I can't figure out how to play that animation on scrolling. Any tips would be greatly appreciated!

[@senyk1]

Hi Diego, Thank you so much for your hard work on this and for making the tutorial. Should i be able to clone the project and then adapt to my needs? When i clone even after publishing it never makes it past the loading screen. Whats also interesting is the 3d image doesnt load or me ( i plan to make other images move in a similar fashion but not use the 3d in the video )

[@dieg0liv]

I believe so, but it's really difficult to figure out what is the problem on your end without more context. There are several things to keep in mind while using the cloneable and cloning the sandbox instance as well. For example, for the scripts to work, you need to make sure that the VM on your cloud sandbox is actually running. Also the build process might generate different versions of the assets and you need to make sure that you're loading the right ones on Webflow.

[@senyk1]

@dieg0liv thank you for the reply, I'm brand new to web dev but learning every day. The loading screen works and doesn't work randomly so I'm going to open up a support case but other than that I was able to get everything to work except the 3d image ( which is fine because I'm not using the 3d image anyways )

[@antonys8467]

This is amazing. Exactly what i've been looking for with blender and webflow knowledge but zero coding knowledge. How does it work if your blender animation has multiple objects? I have seen some example where the model animates separately from the camera panning. Could you please make a tutorial on this?

[@dieg0liv]

Hey Antony, good question! I guess it really depends on how you're planning to use the different animations. Blender has an option to export animations all into one track, or with separate tracks (check the "Group by NLA track" option at 19:37). For this project, I have two objects animation on scroll (the camera and the keyboard), but since everything animates in sync, it doesn't make sense to export animations separately, so I uncheck that option. Now, if I have a scene where the camera animates on scroll, and an object that has an interactive animation (like something that animates on hover), then you should separate tracks, because you can access and use those animation tracks with ThreeJS / R3F (check 43:00 - the animation object would have multiple items on the array). About the turorial, I'll see what I can do!

[@antonys8467]

​@@dieg0liv Yeah i figured it had something to do with Group by NLA track. I am animating something similar where a camera pans through a landscape on scroll but it will include separate animations on each section that appear from the landscape. I am just trying to get the landscape and camera elements working for now before adding more animations. I have managed to get the landscape in but the camera is not animating. Is it possible for us to get on a call? I need to get this project out asap. Happy to pay for your time. Thanks in advance!

[@GAnfernee]

Great Tutorial thanks for sharing. Quick question, couldn't the web interactions have been done using Spline. If so what would you say is the pros and cons from either approach? Thanks. 🙏🏾

[@dieg0liv]

Spline is definitely great for small stuff, it's very friendly in terms of UI, and you can definitely achieve a lot with it. I'd definitely use it but there's still some things that are not great about it: - the scroll interaction + global events is great, however the way you set it up is using arbitrary numbers, which I believe are more related to pixel units. You can't make a transition between states run through 100vh. You can't choose the units. So it's nearly impossible to match the states progress with the sections on your website if their height varies based on screen size. Meaning, it's not responsive. - with the price of ease of use, comes the cost of performance. You can't have on Spline the same level of control on how your scene renders compared to threeJS. I tried to use Spline on a project and performance on mobile was terrible, I ended up just using static renders. In comparison this landing page on mobile runs fairly smoothly. I'm not saying you should not use Spline. I honestly love the tool. It's just that there's some improvements missing for this type of use case IMO. Once they improve performance and fix how the scroll interaction works, I'll probably give it another try. In the meantime, I'll be using this threeJS + R3F approach for 3D projects.

[@GAnfernee]

@@dieg0liv Thanks for the insight. Much appreciated. 😊

[@marcusfrancis24]

How do people make 3D sites interact with webflows CMS?

[@alessioquintarelli4822]

HI Diego, i find your content extremely valuable from what i am trying to learn as a webflow designer. Do you have any plan on establishing a patreon or allow individual students to pay for personalised lessons? Please let me know, and congratulations on your amazing and inspiring work.

[@dieg0liv]

Wow Alessio, thank you for your comment, I'm flattered! I don't have plans for that yet. Honestly, I don't have enough time to dedicate to create tutorials to be able to invest on a Patreon - client work takes the majority of my time. Would probably to go full time with it just like Timothy Ricks does. But I don't discard this plan - either a Patreon or a small course. Not happening this year tough. Maybe next year?

[@benfraser209]

You're the man, Diego!