Before starting your first React VR project, you have to install the dependencies used to build and manage React VR apps: Node.js and the React VR CLI.
If you already have Node.js installed, make sure it is at least version 4.0.
Mac: On Mac, we recommend installing Node.js through Homebrew.
Windows: Get the Windows installer from the nodejs.org download page.
Linux: Go to the nodejs.org package manager page to find specific instructions for your Linux distribution.
To run the sample applications, you must first install the required packages through the node.js package manager.
Open a terminal or command prompt window.
Navigate to the React VR Preelease preview folder.
Wait for npm to finish downloading and installing software.
Start the server. Enter:
If you are on Windows, enable the Firewall exception when you are asked to do so.
After starting the server, open your browser to http://localhost:8081/Samples and explore the samples.
We can use the React VR command line interface tool to generate a new project called “WelcomeToVR.” The tool creates a new folder containing the skeleton for a React VR project and fetches all the necessary external dependencies.
If you are still running npm in your terminal window, press
CTRL+C to stop it.
Navigate to a directory where you want to put your new project.
Install the React VR CLI tool. Enter:
Use the React VR CLI tool to create a new application under a
WelcomeToVR folder and install the required dependencies. Enter:
Change directory to your new WelcomeToVR project directory.
Use the start command to initialize your local development server. Enter:
Open your browser to http://localhost:8081/vr/index.html. You should see something similar to the following:
Click and drag around the world in your browser or open it up on your mobile device to see more.
If you're using a web browser that supports WebVR such as the Carmel Developer Preview browser from Oculus, you should be able to put on your headset and explore the world in full VR. For more information on VR capable browsers, see the VR Browsers topic.
Our next topic explores the code that brings this scene to life.
You can file an issue on GitHub if you see a typo or error on this page!