Read the abstract ➤ https://www.conf42.com/JavaScript_2024_Alok_Kumar_5_3dwebsite_r3f_webdevelopment Other sessions at this event ➤ https://www.conf42.com/js2024 Support our mission ➤ https://www.conf42.com/support Join Discord ➤ https://discord.gg/mvHyZzRGaQ Chapters 00:00 Introduction and Speaker Background 00:39 Overview of Topics to be Covered 01:04 Introduction to Three.js and WebGL 01:53 Examples of Three.js in Action 03:20 Introduction to React Three Fiber (R3F) 04:13 Setting Up the Development Environment 05:19 Basic Components of a 3D Scene 07:49 Creating a 3D Scene with Native Three.js 09:37 Creating a 3D Scene with React Three Fiber 14:20 Adding Interactivity and Helpers 18:14 Transformations and Animations 22:42 Understanding Frame Time Differences 23:11 Implementing Transformations with useFrame Hook 24:43 Adjusting Object Movement for Different FPS 25:44 Using Delta for Consistent Animations 27:46 Exploring Lighting in 3D Scenes 32:11 Adding Shadows for Realism 36:08 Enhancing Scenes with Backgrounds 38:33 Incorporating 3D Models 42:36 Deploying Your 3D Project 44:34 Creative Uses of Three.js 45:12 Conclusion and Contact Information