[Unity]ビルドしたWebGLをクリック後の読み込みに変更する方法
unityでwebGLをビルドすると自動的にファイルが読み込まれるのですが、読み込みをクリック後にされるように変更したいと思います。
※Unity:Webに埋め込んだWebGLをクリックしてからロードするのコードをだいぶ引用させていただきました(汗
unityでビルドした際にindex.htmlが作成されるのですが、その中の記述で以下の部分
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress: UnityProgress});
この部分を以下のように変更
var gameInstance;
function loadWebgl() {
gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress: UnityProgress});
}
「var gameInstance;」を関数の外で宣言しているのですが、引用元を拝見させていただいた結果、フルスクリーンで表示されないのは変数のスコープの問題かもしれまい。(勘で言ってます^^;)
ということで、関数の外で宣言し、loadWebglを呼び出すためにjavascriptでクリックしたら、loadWebglを呼び出すようにします。
<div id="gameContainer" style="width: 800px; height: 450px;"><div style="width: 800px; height: 450px; background: #eeeeee;" onclick="loadWebgl();">クリックしてチョンマゲ</div></div>
しかし、ここで問題発生(涙
webglを呼び出す前にフルスクリーンボタンを押すとエラーが出る、、、
と、いうことで、jquery様のチカラをお借りすることにしました
head内でまずjqueryを読み込みます。※ダウンロードして直接サーバにアップすることもできます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
一旦フルスクリーンボタンを見た目上消します。
<div style="display: none;" class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
次に以下のようにコード変更します。
var gameInstance;
function loadWebgl() {
$(".fullscreen").show();
gameInstance = UnityLoader.instantiate("gameContainer", "Build/Datugokusoshi.json", {onProgress: UnityProgress});
}
「$(“.fullscreen”).show();」で消したフルスクリーンボタンが復活します。
– サンプル –



![[Unity]Terrainに生やした草をスクリプトから消す](https://kuroko-labo.com/wp/wp-content/uploads/2025/05/grass2.png)
![[Unity]PhotonのPUN2で任意のタイミングでメソッドを実行する](https://kuroko-labo.com/wp/wp-content/themes/kuroko3/images/noimage.png)
![[Unity]Gaia Pro 2023でフィールドを作ってみた](https://kuroko-labo.com/wp/wp-content/uploads/2025/01/image06.png)