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

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

Coding Tech via YouTube Direct link

Airplane facing direction of travel

20 of 24

20 of 24

Airplane facing direction of travel

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Video overview
  2. 2 Initial code walkthrough
  3. 3 Starry background
  4. 4 Earth model
  5. 5 Adding lights
  6. 6 Resizing Earth
  7. 7 Airplane Model
  8. 8 Map Marker Sphere
  9. 9 Colorizing Airplanes
  10. 10 Click to zoom
  11. 11 Rotate earth to coordinate
  12. 12 Geolocate user
  13. 13 Handle marker types
  14. 14 Using sample flight data
  15. 15 Calculate airplane direction
  16. 16 Store airplanes to state
  17. 17 Airplane distance to user
  18. 18 Testing finished usePlanes hook
  19. 19 Distance & Origin in control panel
  20. 20 Airplane facing direction of travel
  21. 21 Animate switching planes and correct color
  22. 22 Fetching real planes from OpenSky
  23. 23 Fetching on an interval
  24. 24 Thanks for watching

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.