Unity发布的webgl嵌入网页,并保留加载进度条、footer全屏功能

发布出来的index.html中:<header>内的内容原封不动复制到要嵌入的网页的<header>中;<div class="webgl-content">内的内容复制到要嵌入的位置(不包括<div class="webgl-content">这一行)。

  1. 此时打开已嵌好webgl的网页,游戏载入进度条无法正常显示,将
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/2-4.json", {onProgress: UnityProgress});

中的, {onProgress: UnityProgress}删掉,变为

var gameInstance = UnityLoader.instantiate("gameContainer", "Build/2-4.json");

此时载入进度条可正常显示。

  1. 此时原始的footer无法正常显示,将TemplateData/style.css修改如下
.footer {margin-top: 5px; width:960px;height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.footer .title {margin-right: 10px; float: right;}
.footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

此时footer部分可正常显示,全屏功能正常。
在这里插入图片描述

你可能感兴趣的:(Unity,unity,webgl)