Unity WebGL监听是否进入全屏模式

最新推荐文章于 2024-04-27 14:09:48 发布

九本才

最新推荐文章于 2024-04-27 14:09:48 发布

阅读量735

点赞数 2

分类专栏： Unity 文章标签： webgl unity

本文链接：https://blog.csdn.net/f402455894/article/details/130265445

版权

Unity 专栏收录该内容

38 篇文章 25 订阅

订阅专栏

文章讲述了在将Unity内容打包成WebGL并嵌入到其他网页作为iframe时遇到的两个问题：一是如何添加全屏模式，二是全屏和非全屏状态下如何切换网页与Unity的title。作者尝试了webkitRequestFullScreen但出现画面拉伸，转而使用Unity内部方法并通过修改CSS实现全屏按钮。同时，通过js监听浏览器的全屏状态，调用Unity实例方法来控制title的显示和隐藏。

摘要由CSDN通过智能技术生成

今天遇到一个需求打包成WebGL之后要当做一个iframe，嵌入到别的网页中，其中遇到两个难题。

1.要增加一个全屏模式。

2.全屏的时候使用unity中的title，非全屏的时候要使用网页本身的title。

全屏一开始使用webkitRequestFullScreen，直接控制全屏发现，当点击全屏后，画面出现拉伸，需要点击一下才会回复正常的画面。没有找到有效的解决方法。

于是使用unity自己封装的方法来控制全屏吧。

修改打包后的CSS文件，将全屏按钮移动到画面中。

#unity-fullscreen-button { position: absolute;

bottom: 10px;

width: 38px;

height: 38px;

right: 10px; background: url('fullscreen-button.png') no-repeat center }

第二个问题，做好js调用unity中的代码，控制title的显示和隐藏，然后增加这个方法就可以监听浏览区是否进入全屏状态。

  window.onresize = function() {
    if (document.fullscreenElement) {
        console.log('进入全屏')
        unityInstance.SendMessage("JSToUnity","Show");
    } else {
        // TODO...
        console.log('退出全屏')
        unityInstance.SendMessage("JSToUnity","Close");
    }
};