3D-fying Websites Using React Three Fiber - From Setup to Deployment

Overview

Learn to create immersive 3D web experiences in this comprehensive conference talk that explores the integration of Three.js and React Three Fiber (R3F) into web development. Starting with fundamental concepts of WebGL and Three.js, progress through practical demonstrations of creating 3D scenes using both native Three.js and R3F approaches. Master essential techniques including scene setup, component management, interactive elements, and animations while understanding crucial concepts like frame time differences and consistent movement across different FPS rates. Explore advanced topics such as lighting systems, shadow implementation, background enhancement, and 3D model incorporation. Gain hands-on experience with the useFrame hook for transformations, learn deployment strategies, and discover creative applications of Three.js in modern web development. Perfect for developers looking to elevate their websites with engaging 3D elements and interactive experiences.

Syllabus

Introduction and Speaker Background
Overview of Topics to be Covered
Introduction to Three.js and WebGL
Examples of Three.js in Action
Introduction to React Three Fiber R3F
Setting Up the Development Environment
Basic Components of a 3D Scene
Creating a 3D Scene with Native Three.js
Creating a 3D Scene with React Three Fiber
Adding Interactivity and Helpers
Transformations and Animations
Understanding Frame Time Differences
Implementing Transformations with useFrame Hook
Adjusting Object Movement for Different FPS
Using Delta for Consistent Animations
Exploring Lighting in 3D Scenes
Adding Shadows for Realism
Enhancing Scenes with Backgrounds
Incorporating 3D Models
Deploying Your 3D Project
Creative Uses of Three.js
Conclusion and Contact Information