World background

In order to set the the game's 360 degree world background, we will update the current background scene using the setBackgroundImage method from the Environment API inside componentDidMount.

/MERNVR/index.js:

componentDidMount = () => {    Environment.setBackgroundImage(      {uri: this.state.game.world}    )}

This will replace the default 360 background in the starter React 360 project with our sample game's world image fetched from cloud storage. If you are editing the default React 360 application and have it running, refreshing the http://localhost:8081/index.html link on the browser should show an outer space background, that can be panned around using the mouse:

To generate the preceding screenshot, the View and Text components ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.