Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Create a Solar System with React Three Fiber
Rating: 4.6 out of 5(69 ratings)
4,557 students

Create a Solar System with React Three Fiber

This course is meant to get you started learning Three.js and React Three Fiber while building an actual project
Created byWeb 3D
Last updated 5/2023
English
English [Auto],

What you'll learn

  • Learn how to create a React Three Fiber Project with Vite
  • Learn how to create a model Earth, Moon, & Sun with native R3F code
  • Learn how to import glTF models using NASA's very own model of the International Space Station
  • Learn how to animate objects in a Threejs scene

Course content

1 section • 7 lectures • 1h 49m total length

  • Introduction1:19

    Get started with a beginner friendly intro to building a solar system in React Three Fiber, learn native Three.js concepts, and import 3D models like NASA's ISS into your scene.

  • Setting the Scene: Creating the Stars19:49

    Create a solar system scene by using React Three Fiber's canvas, add orbit controls and Stars from Drei, and animate the Stars with the useFrame hook for dynamic motion.

  • Lights, Earth, Action! Create our Earth Component22:05

    Create an earth component with a mesh, sphere geometry, and a texture map in React Three Fiber, then light the scene with directional lights and a helper.

  • Normal Maps, Specular Maps, and Displacement Maps, oh My!19:37

    Apply normal, specular, and displacement maps to Earth in a React Three Fiber project, switch to Phong material for specular highlights, tune displacement, and animate rotation.

  • Create and Animate our Moon component21:14

    Create and animate a moon with a NASA moon texture, group it to orbit the earth using elapsed time with sine and cosine, and enable shadows for realism.

  • Import NASA's 3D Model (glTF) of the International Space Station24:40

    Import NASA's glTF model of the international space station and orbit it around the earth. Optimize and load glTF assets with useGLTF, useMemo, and useFrame in React Three Fiber.

  • Outro0:42

    Continue exploring the solar system with React Three Fiber on our YouTube channel, using the course resources to keep learning for free.

Requirements

  • Beginner Friendly! - Basic understanding of HTML, CSS, JavaScript, & React
  • If you know basic react hooks you're good to go!

Description

In this tutorial, we will explore the process of building and animating a Solar System model using Three.js and React Three Fiber. By following the declarative coding methods of React Three Fiber, we will learn how to create a realistic Earth and Moon model using Three.js sphere geometries.

You will learn how to import 3D models in the glTF format, the "JPG of 3D", using NASA's very own 3D model of the International Space Station.

We will delve into the application of various map textures to our sphere geometries, such as spherical, normal, specular, and displacement maps, and explore how to adjust their properties. Additionally, we will utilize the custom hook "useFrame" to animate objects in our Three.js scene with ease.

Throughout the tutorial, we will cover key concepts such as meshes, materials, and their respective properties. We will also explore how to set up and configure Three.js lights and utilize the "useHelper" hook to implement helpers in our React Three Fiber application.

Furthermore, we will learn about Three.js shadows and their implementation in our project. By the end of the tutorial, you will have a solid understanding of the fundamentals of building and animating 3D models with Three.js and React Three Fiber.

Who this course is for:

  • Beginners of React Three Fiber

Report abuse