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 by updating the code in index.js and client.js. For a working version, we will start with the state initialized using the sample game data from the previous section.

 /MERNVR/index.js:

export default class MERNVR extends React.Component {

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

...
}

Update client.js and mount to Location

The default code in client.js attaches the mount point declared in index.js to the Default Surface in the React 360 app, where the Surface is a cylindrical layer for placing 2D UI. In order to use the 3D meter-based coordinate system for a layout in 3D space, we need to mount to a Location instead of a Surface. So update client.js to replace the renderToSurface with a renderToLocation.

/MERNVR/client.js:

  r360.renderToLocation(
    r360.createRoot('MERNVR', {...