Autoplay

    Start a Virtual Reality Project Using the React VR CLI

    Nik GrafNik Graf

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss