设为首页收藏本站

微软Hololens全息现实网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

一键登录:

查看: 1134|回复: 0

Unity 发布WebGL 网页自适应问题和全屏交互问题

[复制链接]
发表于 2018-1-18 16:36:57 | 显示全部楼层 |阅读模式

本帖最后由 HoloLens全息现实网 于 2018-1-18 16:39 编辑 unity 发布webgl后找到index.html然后在 head 里添加 代码<head>     <script>     function Reset()     {         var canvas = document.getElementById("...

本帖最后由 HoloLens全息现实网 于 2018-1-18 16:39 编辑

unity 发布webgl后找到index.html
然后在 head 里添加 代码
  1. <head>
  2.     <script>
  3.     function Reset()
  4.     {
  5.         var canvas = document.getElementById("#canvas");//获取#canvas
  6.         canvas.height=  document.documentElement.clientHeight;//获取body可见区域高度
  7.         canvas.width =  document.documentElement.clientWidth;//获取body可见区域高度

  8.     }
  9. </script>
  10. </head>
复制代码
然后body修改代码
  1. <body onresize="Reset()" ,scroll= no, style="overflow:hidden">  
  2.       <div id="gameContainer" style="width: 100%; height: 100%;margin:auto" ></div>        
  3.   </body>
复制代码
将以上两块代码放到index里面后可以看到unity场景会随着浏览器大小做自适应调整。

最后放一个加入了交互功能的index.html文件的修改全代码:
  1. <!DOCTYPE html>
  2. <html lang="en-us">

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>Unity WebGL Player | WEBGL_C</title>
  7.     <link rel="shortcut icon" href="TemplateData/favicon.ico">
  8.     <link rel="stylesheet" href="TemplateData/style.css">
  9.     <script src="Build/UnityLoader.js"></script>
  10.     <script>
  11.     var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Build.json");
  12.     function Reset()
  13.       {
  14.         var canvas = document.getElementById("#canvas");//获取#canvas
  15.         canvas.height=  document.documentElement.clientHeight;//获取body可见区域高度
  16.         canvas.width =  document.documentElement.clientWidth;//获取body可见区域高度

  17.       }
  18.         </script>
  19. </head>

  20. <body onresize="Reset()" ,scroll= no, style="overflow:hidden">  
  21.         <div id="gameContainer" style="width: 100%; height: 100%;margin:auto" ></div>   
  22.     <div class="modal" style="display: none; position: fixed; top: calc(50vh - 251px); left: calc(50vw - 451px); z-index: 100;"></div>
  23.     <div class="modal-backdrop" style="display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.3);" onClick="closeDialog()"></div>
  24.     <script type="text/javascript">
  25.     function MyFunction1(str) {
  26.         document.querySelector('.modal').style.display = 'block';
  27.         document.querySelector('.modal-backdrop').style.display = 'block';
  28.         var iframe = document.createElement('iframe');
  29.         iframe.src = str;
  30.         iframe.style.width = '902px';
  31.         iframe.style.height = '502px';
  32.         document.querySelector('.modal').appendChild(iframe);
  33.         // window.open(str,"_blank","toolbar=no, location=yes, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=900, height=500");
  34.     }

  35.     function closeDialog() {
  36.         document.querySelector('.modal').innerText = '';
  37.         document.querySelector('.modal').style.display = 'none';
  38.         document.querySelector('.modal-backdrop').style.display = 'none';
  39.     }
  40.     </script>
  41. </body>

  42. </html>
复制代码










上一篇:让我们看看HoloLens是如何让MR改变建筑行业套路的
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

注册验证邮件查收提醒:

由于各大邮箱政策原因,

如果没收到邮件提醒,

您的注册验证邮件可能

被投送到您邮箱的垃圾箱,

请注意查收验证哦


QQ|小黑屋|Hololens全息现实网 ( 京ICP备15026232号   点击这里给我发消息

GMT+8, 2018-9-25 18:56 , Processed in 0.526873 second(s), 27 queries .

Powered by Hololens全息现实网 X3.2

© 2001-2017 Hololens全息现实网

快速回复 返回顶部 返回列表