[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();」で消したフルスクリーンボタンが復活します。

サンプル