When I build webGL in unity, the file is automatically loaded, but I would like to change it so that loading is done after clicking.
I quoted a lot of code from *Unity:WebGL embedded in the web to load after clicking (sweat).

When you build with unity, index.html is created.

var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress : UnityProgress});

.
Change this part as follows

var gameInstance;
function loadWebgl() {
gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress: UnityProgress}); }
}

I have declared “var gameInstance;” outside of the function, but as a result of looking at the quoted source, it may be a problem with the scope of the variable that it is not displayed in full screen. （I’m just going on a hunch.)
So, I will declare it outside the function and use javascript to call loadWebgl when I click on it to call loadWebgl.

<div id="gameContainer" style="width: 800px; height: 450px;"><div style="width: 800px; height: 450px; background: #eeeeeeee;" onclick="loadWebgl();">click to chommage</div></div>

But here’s the problem (tears)

If I press the fullscreen button before calling webgl, an error occurs,
So, we decided to borrow the help of jquery!
First, load jquery in the head. You can also download it and upload it directly to the server.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Once the fullscreen button is turned off for all intents and purposes.

<div style="display: none;" class="fullscreen" onclick="gameInstance.SetFullscreen(1)">&lt ;/div>

Next, change the code as follows.

var gameInstance;.
function loadWebgl() {
$(".fullscreen").show();
gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress: UnityProgress});
}

The fullscreen button that was erased by “$(“.fullscreen”).show();” is restored.

– Sample -.

Tweet