How to add 3D Models to Website using React Three Fiber

Learn how to add 3D elements to any React website. I would recommend knowing some React basics since i will focus on the 3D aspects rather than React itself. In this video you will learn how to use "React three fiber", a React renderer built to render Three.js content. In the tutorial I will download 2 different 3D models. The first model is the earth and a second model is an airplane. The models are in the GLTF format and i will show how to convert them directly into React components using a npm utility package called "gltfjsx". I will add some animations to the earth like click to zoom and rotating to showcase geographic locations at any lon/lat coordinate pair. I will use the browser geolocation API to place the webpage user on the correct spot on earth. Finally I will connect to an API giving realtime locations of surrounding airplanes and place them correctly on the surface of the earth, sorting them by closest to the user of the webpage.

Twitter: https://twitter.com/BarelyDaniel Github: https://github.com/danba340 Tiktok: https://www.tiktok.com/@barelycoding

⭐️ Video Contents ⭐️ 0:00 Video overview 1:15 Initial code walkthrough 3:32 Starry background 5:30 Earth model 8:47 Adding lights 9:28 Resizing Earth 10:38 Airplane Model 15:28 Map Marker Sphere 17:48 Colorizing Airplanes 22:33 Click to zoom 28:23 Rotate earth to coordinate 33:46 Geolocate user 36:25 Handle marker types 37:23 Using sample flight data 45:37 Calculate airplane direction 48:45 Store airplanes to state 49:41 Airplane distance to user 51:18 Testing finished usePlanes hook 55:33 Distance & Origin in control panel 57:23 Airplane facing direction of travel 59:18 Animate switching planes and correct color 1:01:59 Fetching real planes from OpenSky 1:04:29 Fetching on an interval 1:05:47 Thanks for watching ... https://www.youtube.com/watch?v=rWFaJNcx-Xk