Unity 3D WebView for Android初次使用体验

最新推荐文章于 2025-10-09 12:35:32 发布

原创最新推荐文章于 2025-10-09 12:35:32 发布 · 3.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#webview #android #unity

Unity3D 同时被 2 个专栏收录

11 篇文章

订阅专栏

html5

5 篇文章

订阅专栏

本文介绍了如何在Unity3D中使用3DWebViewforAndroid实现透明网页，包括在HTML头部添加`transparent`元数据和CSS调整背景色。同时，作者分享了解决LoadUrl动态加载问题，避免页面加载白屏的技巧。

Unity 3D WebView for Android初次使用体验

3D WebView for Android基础问题
透明网页
- HTML头增加transparent的meta说明
- CSS为Gecko增加黑色背景色
LoadUrl动态加载问题
避免加载过程白屏

3D WebView for Android基础问题

不同于其他WebView采用Chrome内核，3D WebView for Android内核使用的是Gecko引擎（由Mozilla开发用于FireFox内核），一般浏览器使用兼容性问题可以看FireFox使用规则。该插件不同于UniWebView等使用Activity嵌入方式，只能以贴屏形式使用WebView，3D Web View支持将网页渲染到离屏表面（Texture2D），可以在RawImage UI或者Mesh Renderer三维物体表面使用，支持在三维世界中嵌入页面，支持三维碰撞检测（可用于XR应用）
在这里插入图片描述

透明网页

Embedded Browser等使用Chrome内核的浏览器插件，网页在不设置背景颜色的前提下就是透明的。3D Web View要想使用透明页面需要设置专有meta和css。

HTML头增加transparent的meta说明

  <meta name='transparent' content='true'>

上下文代码

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- This transparent meta tag instructs 3D WebView to allow the page to be transparent. -->
  <meta name='transparent' content='true'>
  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

CSS为Gecko增加黑色背景色

    /* For Gecko only, set the background color
                          to black so that the shader's cutout rect
                          can translate the black pixels to transparent.*/
    @supports (-moz-appearance:none) {
      body {
        background-color: black;
      }
    }

LoadUrl动态加载问题

按照其他浏览器插件习惯用法，一般写成

  void Start()
  {
    Vuplex.WebView.CanvasWebViewPrefab browser = GetComponent<Vuplex.WebView.CanvasWebViewPrefab>();
    string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
    browser.WebView.LoadUrl(url);
  }

但是，上面这个写法在PC上调试可能没问题，但真机运行页面不会加载。问题出在调用browser.WebView.LoadUrl时WebView的值为空。
正确代码如下

  async void Start()
  {
    Vuplex.WebView.CanvasWebViewPrefab browser = GetComponent<Vuplex.WebView.CanvasWebViewPrefab>();
    await Task.WhenAll(new Task[] {
               browser.WaitUntilInitialized()
            });
    string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
    browser.WebView.LoadUrl(url);
  }

Start()修饰为异步执行，增加browser等待初始化完成代码，WebView初始化完成后才能调用LoadUrl。

避免加载过程白屏

3D Web View在加载页面完成以前，显示的是白色的RawImage画面。我现在的处理方式是一开始将RawImage的Alpha设置为0，让RawImage透明
在这里插入图片描述
在URL加载完成后再将Alpha设置为1，显示出HTML页面

    browser.WebView.LoadProgressChanged += (sender, eventArgs) =>
    {
      if (eventArgs.Type == Vuplex.WebView.ProgressChangeType.Finished)
      {
        foreach(UnityEngine.UI.RawImage image in images)
        {
          image.color = Color.white;
        }
      }
    };
    string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
    browser.WebView.LoadUrl(url);