React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. This guide covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds. Even a combination of both is possible. Each lesson is independent, but some require knowledge explained in a previous lesson.

We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.



Start a Virtual Reality Project Using the React VR CLI

A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes. 

We'll learn how to load in panoramas which are [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) images, and we'll also learn how to [cubemap](https://en.wikipedia.org/wiki/Cube_mapping) multiple images. We'll also learn about passing event and style properties to `<Pano/>`. 


Build 3D Panorama Scenes Using the Pano Component in React VR

To annotate or describe elements in a VR scene we can leverage the built-in `<Text/>` component. In this lesson we'll place multiple `<Text/>` entries in a scene. 

We'll also explore its various `style` options, such as changing its color and position in your scene.


Write Text Using the Text Component in React VR

Same as a `<div>` in HTML or a `<View/>` in **ReactNative**, React VR comes with a `<Container/>` component that supports [flexbox layouting](https://facebook.github.io/react-native/docs/flexbox.html). 

In this lesson we'll explore what a `<View/>` means in a three dimensional context and how to structure two dimensional content like text and images.

Structure 2D Content like Images and Text Using the View Component in React VR

React VR ships with a handful of 3D primitives. We'll `import` primitives like `<Sphere/>`, `<Box/>`, `<Cylinder/>`, and `<Plane/>` and explore how they can positioned in a three dimensional space. 

We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well. 


Add Shapes Using 3D Primitives in React VR

In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we'll walk through the available lighting components and create a common outdoor lighting setup. 

This includes the components: `<AmbientLight/>`, which affects all objects in the scene equally and from all directions; `<DirectionalLight/>`, which illuminates all objects equally from a given direction; `<PointLight/>`, which spreads outward in all directions from one point; and finally `<SpotLight/>`, which spreads outwards in the form of a cone. 

A handy demo for `<SpotLight/>` can be found [here](https://threejs.org/docs/#api/lights/SpotLight).


Add Lighting Using Light Components in React VR

React VR isn't limited to simple 3D primitives. By using the `<Model/>` Component we can place complex 3D models into our scene. 

In this lesson we'll import a custom polygon mesh of an astronaut by loading in a Wavefront `.obj` file. We'll play with our astronaut and learn about various options that will define the surface area of the model.

Render Custom 3D Objects Using the Model Component in React VR

One of React's core concepts is component composition. React VR is no different in that regard. You can take an existing component and wrap it into a new React component. 

We'll do so by creating a `<Tree/>` component out of simple shapes, a `<Cylinder/>` trunk and a `<Sphere/>` tree crown. When making our `<Tree/>` we'll also see how the position of shapes is relative to the `<View/>` and learn how we can leverage this superpower! 

Compose Multiple 3D Objects into one Component in React VR

Letting the user interact inside a VR scene is a *crucial* element for an immersive VR experience. 

In this lesson we'll walk through the various interaction handlers that come with almost every React VR component and show why the component `<VrButton/>` is useful and how to use it.

Capture User Interaction with React VR

Motion is an important aspect of a complete immersive experience, therefor we are going to look into the animation API **Animated**. 

**Animated** allows us to express a wide variety of animation patterns to animate text, images, and views. 

In addition we'll leverage the higher order component, `<CreateAnimatedComponent/>`, to create a rotating box! 

Build Virtual Reality Experiences Using React VR

Nik Graf

Course Content