Interactive 3D in Webflow with React Three Fiber + CodeSandbox скачать в хорошем качестве

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: https://webflow.com/made-in-webflow/w... CodeSandbox template: https://codesandbox.io/p/sandbox/flow... GLTF to JSX converter: https://gltf.pmnd.rs/ React Three Fiber: https://docs.pmnd.rs/react-three-fiber/ Drei library for R3F: https://github.com/pmndrs/drei GSAP + React docs: https://greensock.com/react/ Color converter (from hex to RGB in percent): https://convertingcolors.com/ Lenis: https://lenis.studiofreight.com/ Lenis tutorial for Webflow:    • The BEST smooth scrolling library for your...   Timothy Ricks’ cloneable for GSAP text effects: https://webflow.com/made-in-webflow/w...