In this video, Emmanuel Henri explores the toolset required to run a React VR project and then initializes the project.
- The first thing you'll need is a code editor like the one I'm using is VS Code. But any code editor with access to a terminal will do. I personally work with VS Code since it has everything I need in one application. But any of the usual suspects, like WebStorm, Sublime, Atom, or any code editor will do. Then we need to install the React VR CLI tool and then get our project initialized. I assume that you have Node installed, if not please pause this video and go to nodejs.org to install it.
Alright, so lets bring up our Integrator Terminal inside of VS Code, so if you don't have VSCode open go ahead and do. And then go to View, Integrator Terminal, and let's just check where we are by doing LS. So we are in the Root directory now. Let me right away change to the desktop, CD Desktop like so. And we should be here so we are on the Desktop. So you can see Exercise Files is here, and we have Exercise Files so when we create a project it's going to be on our Desktop, let's go back to VS Code.
So let's go ahead and install React VR. So the first thing I want you to do if you don't have root access to your computer, do a sudo because we're going to install globally. So sudo MPM install -G React-VR-CLI Because I did an install with sudo recently I didn't ask for my password, but it should ask you for your password. So that's fine, just enter your password. And then it will basically install React VR.
The next thing we need to do is create a new project. So the way to create or initialize a new project with React VR is simply by using the CLI tool. So React-VR init and then the name of your project. And what it will do is create a folder, in this case on our Desktop. So if we go back here it's going to create the folder Spaceman and initialize a project. Okay, so now we got our project initialized, so let's go ahead and actually run the base project.
So the first thing I need to do is do a LS to se where I'm at. I need to go inside of that particular folder here. So I need to do CD Spaceman and what I'm going to use here is a command that you may not be familiar with from NPM. Is do an &&, so double-ampersand like so, and then do NPM start. So what that little command here will do is run this and once this is done then run this command here. So as opposed to do two commands we're just doing one single command and it's going to run those two NPM command one after another like so.
But the double-ampersand is always doing the first one, if the first one is successful then it's going to run the second one. So if you'd like to run multiple commands and make sure that they actually are successful before it runs the second one this is the right way to go. Alright, so now we got our project running, and it's going to need some time to actually initialize while we open up our browser. Keep in mind that right now not all browsers will work with React VR.
So if you're seeing WebGL is not supported in this particular browser then switch to another one. I know that Firefox is a well-supported all throughout any versions for React VR, Safari as well. Chrome I've seen some versions work, some others not work. So I think your best bet right now is to use Safari. In our case we're going to use Firefox. And I'm actually going to use the Firefox developer version. So before I actually go to the browser one quick note for all.
When you are actually using React VR keep in mind that it's resource-intensive. If you are running this on a laptop like I did several times or on a system that doesn't have enough resources to actually support React VR, please keep in mind that it may actually run slower, or your 3D models may actually take some time to show on the screen. So keep in mind that your hardware in this course has a big impact in how quickly, or even the animations will actually show as they should.
So please keep in mind so if you're not getting the same result as you see me getting on the screen, it may be due to the hardware you using. So lets go ahead and load Firefox. And I already have it open here so. And then you enter localhost : 8081 / VR And this is the original scene that you should see. So now we have basically a text here that says hello. And this is a 360 background that actually we can run through like this.
Okay so you have the project initialized and started let's move on.
- Designing an immersive multimedia experience
- Adding background, 3D, and text elements to your scene
- Adding animation
- Using state
- Optimizing and publishing the project