
Full-Stack React Projects
By :

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
...
}
}
...
}
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', {...