How to Add 3D Models to Website Using React Three Fiber

Discover how to incorporate 3D elements into React websites using React Three Fiber in this comprehensive tutorial video. Explore the process of rendering Three.js content with React Three Fiber, a specialized React renderer. Learn to download and convert GLTF format 3D models of the Earth and an airplane into React components using the gltfjsx npm utility package. Implement interactive features such as click-to-zoom and rotating the Earth to showcase specific geographic locations. Utilize the browser geolocation API to place users accurately on the globe. Connect to a real-time API for surrounding airplane locations, correctly positioning them on the Earth's surface and sorting them by proximity to the user. Cover topics including creating a starry background, adding lights, resizing models, colorizing objects, implementing zoom functionality, rotating to coordinates, handling different marker types, calculating airplane directions, managing state, and fetching real-time data from OpenSky. Gain practical insights into building immersive 3D web experiences with React and Three.js.

Video overview
Initial code walkthrough
Starry background
Earth model
Adding lights
Resizing Earth
Airplane Model
Map Marker Sphere
Colorizing Airplanes
Click to zoom
Rotate earth to coordinate
Geolocate user
Handle marker types
Using sample flight data
Calculate airplane direction
Store airplanes to state
Airplane distance to user
Testing finished usePlanes hook
Distance & Origin in control panel
Airplane facing direction of travel
Animate switching planes and correct color
Fetching real planes from OpenSky
Fetching on an interval
Thanks for watching