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 PUBLICATION PERMISSIONS:
Daniel provided Coding Tech with the permission to republish this video on the Coding Tech channel. CREDITS:
Daniel's channel: https://www.youtube.com/c/BarelyCoding https://www.youtube.com/watch?v=pLKE2DvPxDo