Developing a Web-Based VR Game

The advent of virtual reality (VR) and augmented reality (AR) technologies is transforming how users interact with software and, in turn, the world around them. The possible applications of VR and AR are innumerable, and though the gaming industry has been an early adopter, these rapidly developing technologies have the potential to shift paradigms across multiple disciplines and industries.

In order to demonstrate how the MERN stack paired with React 360 can easily add VR capabilities to any web application, we will discuss and develop a dynamic, web-based VR game in this and the next chapter. In this chapter, we will focus on defining the features of the VR game. Additionally, we will go over the key 3D VR concepts that are relevant to implementing this VR game, before developing the game view using React 360.

In this chapter, we will build the...

Introducing the MERN VR Game

The MERN VR Game web application will be developed by extending the MERN skeleton and integrating VR capabilities using React 360. It will be a dynamic, web-based VR game application, in which registered users can make their own games, and any visitor to the application can play these games. The home page of this application will list the games on the platform, as shown in the following screenshot:

The code to implement features of the VR game using React 360 is available on GitHub at https://github.com/PacktPublishing/Full-Stack-React-Projects-Second-Edition/tree/master/Chapter13/MERNVR. You can clone this code and run the application as you go through the code explanations in the rest of this chapter.

The features of the game will be simple enough to reveal the capabilities of introducing VR into a MERN-based application, without delving too deeply...

Getting started with React 360

React 360 makes it possible to build VR experiences using the same declarative and component-based approach as in React. The underlying technology of React 360 makes use of the Three.js JavaScript 3D engine to render 3D graphics with WebGL within any compatible web browser and also provides us with access to VR headsets with the Web VR API.

Though React 360 builds on top of React and the apps run in the browser, React 360 has a lot in common with React Native, thus making React 360 apps cross-platform. This also means that some concepts of React Native are also applicable to React 360. Covering all of the React 360 concepts is outside the scope of this book; therefore, we will focus on the concepts that are required to build the game and integrate them with the MERN stack web application. In the following section, we will begin by setting up a React...

Key concepts for developing the VR game

Before creating VR content and an interactive 360-degree experience for the game, we will highlight some of the relevant aspects of the virtual world, and how React 360 can be used to work with these VR concepts. Given the wide range of possibilities in the VR space and the various options available with React 360, we need to identify and explore the specific concepts that will enable us to implement the interactive VR features we defined for the game. In the following sections, we will discuss the images that will make up the 360-degree world of the game, the 3D positioning system, along with the React 360 components, APIs, and input events that will be utilized to implement the game.

Equirectangular panoramic images

...

Defining game details

Each game in MERN VR Game will be defined in a common data structure that the React 360 application will also adhere to when rendering the individual game details. In the following sections, we will discuss the data structure for capturing a game's details, and then highlight the difference between using static game data and dynamically loaded game data.

Game data structure

The game data will consist of details such as the game's name, a URL pointing to the location of the equirectangular image for the game world, and two arrays containing details for each VR object to be added to the game world. The following list indicates the fields corresponding to the game data attributes:

• name: A string...

Building the game view in React 360

We will apply the React 360 concepts and use the game data structure to implement the game features for each game in the MERN VR Game application. For these implementations, we will update the default starter code generated in the index.js and client.js files within the initiated React 360 project.

For a working version of the game, we will start with the MERNVR component's state that was initialized using the sample game data from the previous section.

The MERNVR component is defined in index.js, and the code will be updated with the game data in state, as shown in the following code:

/MERNVR/index.js

export default class MERNVR extends React.Component {

    constructor() {
        super()
        this.state = {
                game: sampleGameData
                ...
            }
    }

...
}

This will make the sample game's details available...

Bundling for production and integration with MERN

Now that we have features of the VR game implemented and are functional with the sample game data, we can prepare it for production and add it to our MERN-based application to see how VR can be added to an existing web application. In the following sections, we will look at how to bundle the React 360 code, integrate it with a MERN application, and test the integration by running the game from the application.

Bundling React 360 files

React 360 tools provide a script to bundle all of the React 360 application code into a few files that we can just place on the MERN web server and serve as content at a specified route. To create the bundled files, we can run the following command...

Summary

In this chapter, we used React 360 to develop a web-based VR game that can be easily integrated into MERN applications.

We began by defining simple VR features for the gameplay. Then, we set up React 360 for development and looked at key VR concepts, such as equirectangular panoramic images, 3D positions, and coordinate systems in the 360-degree VR world. We explored the React 360 components and APIs required to implement the game features, including components such as View, Text, Entity, and VrButton, along with the Environment, VrHeadModel, and NativeModules APIs.

Finally, we updated the code in the starter React 360 project to implement the game with sample game data, then we bundled the code files and discussed how to add these compiled files to an existing MERN application.

With these steps covered, you will now be able to build your own VR interfaces with React 360...