How can i get my ReactJS project to display Unity 3D Game? I've tried react unity WEBGL

Viewed 1613

I just finished coding a website with a Virtual Tour made on Unity, i've exported it as WEBGL with compression format disabled, and decompression fallback off(Unity). Then added this to my code on React

import React from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
  loaderUrl: "../Build/unity341.loader.js",
  dataUrl: "../Build/unity341.data",
  frameworkUrl: "../Build/unity.framework.js",
  codeUrl: "../Build/unity341.wasm",
});

function Game() {
    return <Unity unityContext={unityContext} />;
  }

  export default Game; 

then imported the game on the page

import React, {Component} from 'react';
import Game from './game.jsx';
import {Container} from 'react-bootstrap';

class GamePage extends Component {
render() {
return ( 
  <div>
    <Game/>
  <Container>
//text and stuff inside the container
</Container>
</div>
);
}
}


export default GamePage;

But when i render it on my localhost i dont get the Unity viewer, and when inspecting on Chrome the only thing i see where the game should be is the following tag

<canvas class>

Thanks for your help guys !

1 Answers

Put generated WebGL files from Build folder to public folder in react. See picture. Those files must be in public folder because react server is hosting static files in this folder. For example i have put them to public\build folder. See picture.

enter image description here

Code in react:

const unityContext = new UnityContext({
    loaderUrl: 'build/<AppName>.loader.js',
    dataUrl: 'build/<AppName>.data',
    frameworkUrl: 'build/<AppName>.framework.js',
    codeUrl: 'build/<AppName>.wasm',
});
<Unity unityContext={unityContext} style={{ width: '100%', height: '100%' }} />
Related