Start a Virtual Reality Project Using the React VR CLI

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

Write Text Using the Text Component in React VR

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

Add Shapes Using 3D Primitives in React VR

Add Lighting Using Light Components in React VR

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

Compose Multiple 3D Objects into one Component in React VR

Capture User Interaction with React VR

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

Build Virtual Reality Experiences Using React VR

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.



[00:00] To get started with React VR, we're going to instantiate VR CLI globally by running npm install -g react-vr-cli. This provides us with a React VR binary which we can use to create our first project.

[00:15] I'm going to call it app, but you can choose whatever you prefer. By running this command, a directory will be created based on your name, a boilerplate added inside, and all the necessary dependencies installed.

[00:28] Now, we can see the [inaudible] project and run npm start. Our VR application is now available at localhost:8081/vr are and we're going to open it in a browser.

[00:39] Let me point out here that the first time you visit localhost in your browser, it might actually take a little while, but every subsequent request will be way faster. Once loaded, we can see we are up and running VR project in a browser. By using the mouse, we can look around.

[00:58] All right, let's have a closer look at the generated code. While there are a bunch of configuration files, the most relevant to us is index.vr.js. It contains all the components representing the current scene.

[01:12] For demonstration purposes, we're going to change the text from hello to hello world. In order for the change to take effect, you need to refresh the browser. As you can see, the text changed to hello world, a bit tedious though to constantly reload the page manually.

[01:28] Fortunately, React VR also comes with hot reloading. We can activate by simply appending ? and then the text hotreload to the URL and refresh one more time. Let's give it a try.

[01:39] By removing world from the text and as you can see, it changes right away in the browser. One more time, you change the text to hi and the change becomes visible shortly after I saved the file.

Course

Build Virtual Reality Experiences Using React VR

Start a Virtual Reality Project Using the React VR CLI

Share this video with your friends