You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
7.0 KiB
189 lines
7.0 KiB
8 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en-us">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Unity WebGL Player | {{{ PRODUCT_NAME }}}</title>
|
||
|
|
<link rel="shortcut icon" href="TemplateData/img/favicon.ico">
|
||
|
|
<link rel="stylesheet" href="TemplateData/css/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="keepRatio">
|
||
|
|
|
||
|
|
<div class="webgl-content">
|
||
|
|
<!--<button id="fullScreenButton" onclick="ToggleFullScreen()"></button>-->
|
||
|
|
<canvas id="gameContainer"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="loadingBlock">
|
||
|
|
<img class="logo" src="TemplateData/img/Logo.png"></img>
|
||
|
|
<span class="subtitle"> <br>
|
||
|
|
头歌为可编程的虚拟仿真课程提供开发和运行环境。
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div id="progressBar">
|
||
|
|
<div>加载中...</div><br>
|
||
|
|
<div class="centered">
|
||
|
|
<div id="emptyBar"></div>
|
||
|
|
<div id="fullBar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="warningBrowserBlock" style="display:none;">
|
||
|
|
<div class="warningBrowserText">
|
||
|
|
Your browser may not be compatible with this website. For an optimal experience, we suggest you to download one of this popular web browsers.
|
||
|
|
</div>
|
||
|
|
<div class="browserIcons">
|
||
|
|
<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
|
||
|
|
<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
|
||
|
|
<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="warningMobileBlock" style="display:none;">
|
||
|
|
<div class="warningBrowserText">
|
||
|
|
Please note that Unity WebGL is not currently supported on mobiles.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="errorBrowserBlock" style="display:none;">
|
||
|
|
<img class="logo" src="TemplateData/img/Logo.png"></img>
|
||
|
|
<span class="subtitle">
|
||
|
|
<br>
|
||
|
|
头歌为可编程的虚拟仿真课程提供开发和运行环境。
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<div id="errorContent">
|
||
|
|
<div id="errorBrowserText">
|
||
|
|
Your browser does not support WebGL. <br> You can download one of this popular web browsers.
|
||
|
|
</div>
|
||
|
|
<div class="browserIcons">
|
||
|
|
<a href="https://www.mozilla.org/firefox" target="_blank"><img src="TemplateData/img/browser-firefox.png" alt="Firefox browser"></a>
|
||
|
|
<a href="https://www.google.com/chrome" target="_blank"><img src="TemplateData/img/browser-chrome.png" alt="Chrome browser"></a>
|
||
|
|
<a href="https://www.apple.com/safari/" target="_blank"><img src="TemplateData/img/browser-safari.png" alt="Safari browser"></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
var container = document.querySelector(".webgl-content");
|
||
|
|
var canvas = document.querySelector("#gameContainer");
|
||
|
|
var loadingBar = document.querySelector("#progressBar");
|
||
|
|
|
||
|
|
function unityShowBanner(msg, type) {
|
||
|
|
function updateBannerVisibility() {
|
||
|
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||
|
|
}
|
||
|
|
var div = document.createElement('div');
|
||
|
|
div.innerHTML = msg;
|
||
|
|
warningBanner.appendChild(div);
|
||
|
|
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||
|
|
else {
|
||
|
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||
|
|
setTimeout(function() {
|
||
|
|
warningBanner.removeChild(div);
|
||
|
|
updateBannerVisibility();
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
updateBannerVisibility();
|
||
|
|
}
|
||
|
|
|
||
|
|
var buildUrl = "Build";
|
||
|
|
var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
|
||
|
|
var config = {
|
||
|
|
dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
|
||
|
|
frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
|
||
|
|
#if USE_WASM
|
||
|
|
codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
|
||
|
|
#endif
|
||
|
|
#if MEMORY_FILENAME
|
||
|
|
memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
|
||
|
|
#endif
|
||
|
|
#if SYMBOLS_FILENAME
|
||
|
|
symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
|
||
|
|
#endif
|
||
|
|
streamingAssetsUrl: "StreamingAssets",
|
||
|
|
companyName: {{{ JSON.stringify(COMPANY_NAME) }}},
|
||
|
|
productName: {{{ JSON.stringify(PRODUCT_NAME) }}},
|
||
|
|
productVersion: {{{ JSON.stringify(PRODUCT_VERSION) }}},
|
||
|
|
showBanner: unityShowBanner,
|
||
|
|
};
|
||
|
|
|
||
|
|
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||
|
|
// Mobile device style: fill the whole browser client area with the game canvas:
|
||
|
|
|
||
|
|
var meta = document.createElement('meta');
|
||
|
|
meta.name = 'viewport';
|
||
|
|
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||
|
|
document.getElementsByTagName('head')[0].appendChild(meta);
|
||
|
|
container.className = "unity-mobile";
|
||
|
|
canvas.className = "unity-mobile";
|
||
|
|
|
||
|
|
// To lower canvas resolution on mobile devices to gain some
|
||
|
|
// performance, uncomment the following line:
|
||
|
|
// config.devicePixelRatio = 1;
|
||
|
|
|
||
|
|
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||
|
|
} else {
|
||
|
|
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||
|
|
|
||
|
|
canvas.style.width = "100%";
|
||
|
|
canvas.style.height = "100%";
|
||
|
|
}
|
||
|
|
|
||
|
|
function UnityProgress(progress) {
|
||
|
|
document.getElementById("loadingBlock").style.display = "inherit";
|
||
|
|
document.getElementById("fullBar").style.width = (100 * progress) + "%";
|
||
|
|
document.getElementById("emptyBar").style.width = (100 * (1 - progress)) + "%";
|
||
|
|
if (progress == 1)
|
||
|
|
{
|
||
|
|
setTimeout(function(){ document.getElementById("loadingBlock").style.display = "none"; }, 3000);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function RuntimeInitialized(){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#if BACKGROUND_FILENAME
|
||
|
|
canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
|
||
|
|
#endif
|
||
|
|
loadingBar.style.display = "block";
|
||
|
|
|
||
|
|
let UnityInstance;
|
||
|
|
var script = document.createElement("script");
|
||
|
|
script.src = loaderUrl;
|
||
|
|
script.onload = () => {
|
||
|
|
createUnityInstance(canvas, config,UnityProgress).then((unityInstance) => {
|
||
|
|
UnityInstance = unityInstance;
|
||
|
|
RuntimeInitialized();
|
||
|
|
}).catch((message) => {
|
||
|
|
alert(message);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
document.body.appendChild(script);
|
||
|
|
|
||
|
|
|
||
|
|
//注册web端消息监听
|
||
|
|
window.addEventListener('message',receiveMessage,false);
|
||
|
|
|
||
|
|
function receiveMessage(event){
|
||
|
|
console.log("receive web message ",event.data);
|
||
|
|
UnityInstance.SendMessage("WebConnecter","RecData",event.data);
|
||
|
|
}
|
||
|
|
|
||
|
|
//发送消息给web端
|
||
|
|
function SendToWeb(param){
|
||
|
|
console.log("receive unity message ",param);
|
||
|
|
window.parent.postMessage(param,'*');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|