unity导出webgl如何设置横屏

关于横屏,似乎体现不是太好。尝试过旋转CSS样式,但canvas画布严重变形,也不适合。

不过2023版导出webgl后,在手机浏览器中访问时,点击图标即可全屏化。

但在微信内置浏览器中若不开启横屏,则永远无法横屏显示。

此外,微信浏览器访问webgl后,如果变成横屏显示,上面的标题会占据许多内容,显示并不友好,因此仍是推荐引导用户在手机浏览器中访问较佳。

导出webgl后,打开html,在script中发现一行代码:

unityInstance.SetFullscreen(1);

 点击上面图标后,执行此代码则全屏化,若Unity发布时设置的是横屏,则H5页面会转为横屏。

于是把这句话直接写在script里,发现并不能自动全屏化:

script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  loadingBar.style.display = "none";

unityInstance.SetFullscreen(1); //此处在进度完成后直接全屏化并不生效


                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                  };           
              }).catch((message) => {
                alert(message);
              });
            };

研究发现此时虽然表面上进度加载完成了,实际并没有完全加载,因此需要延迟执行,如:

script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
              }).then((unityInstance) => {
                  loadingBar.style.display = "none";
                fullscreenButton.onclick = () => {
                  unityInstance.SetFullscreen(1);
                  };


                  setTimeout(() => {
                      unityInstance.SetFullscreen(1); //延迟执行全屏化,即可自动转横屏
                  },3000)


              }).catch((message) => {
                alert(message);
              });
            };

以上即可自动横屏,由于项目并不大,并未测试延迟多少秒为佳,但几百毫秒时也是无效。

 

此时仍有一个问题:加载时的LOGO,进度条等依然是竖屏显示,此时需要处理的是加载界面,即处理生成的html文件样式。

找到相关的div元素,或新建一个div元素覆盖在最上面,等资源加载完成后再显示画布即可。

关于CSS样式及DIV元素,查看index.html便知,此处不再阐述。

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Unity导出WebGL时,可以使用动态获取模型文件的方法。首先,需要将模型文件以可访问的方式加载到Unity的资源目录中。这可以通过将模型文件放置在StreamingAssets文件夹中实现。该文件夹的内容将被打包到WebGL构建中,并可以在运行时访问。 创建一个用于加载模型文件的脚本。脚本应该包括一个公共函数,该函数可以接受模型文件的路径,并返回加载的模型对象。在函数内部,可以使用Unity的WWW类来加载模型文件。使用StreamingAssets文件夹的路径和模型文件的路径创建一个完整的URL。然后,使用WWW类的构造函数并传递该URL来加载模型文件。 一旦模型文件加载完成,可以根据应用的需求对其进行处理。例如,可以使用Unity的Instantiate函数将模型实例化到场景中,或将其用作角色模型、道具或其他游戏资产。 在Unity中,可以将模型文件导出WebGL构建。通过依次选择“文件”→“构建设置”→“WebGL”,可以打开WebGL构建设置窗口。在窗口中,可以设置构建的目标文件夹、名称和其他设置。然后,点击“构建”按钮开始构建WebGL版本。 构建完成后,将生成一个包含所有必要文件的文件夹。此文件夹可以使用Web服务器进行托管,或直接通过浏览器打开。在浏览器中运行时,UnityWebGL版本将动态获取模型文件并加载到场景中,实现动态获取模型文件的效果。 这是使用Unity导出WebGL并动态获取模型文件的一种方法。通过按照上述步骤设置和执行,您将能够在WebGL版本中实现动态加载模型的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值