Unity 内嵌前端网页与通信 (zfbrower、3dwebview)

这篇具有很好参考价值的文章主要介绍了Unity 内嵌前端网页与通信 (zfbrower、3dwebview)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Unity 内嵌网页通信

插件:3dwebview
需要添加的组件和一些canvas的设置,可参考插件提供的示例场景。
加载网页、 前端到Unity,Unity到前端的参数互传使用方法:
前端

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--设置透明页面-->
    <meta name='transparent' content='true'>
    <meta name="theme-color" content="#000000">

    <title>Document</title>
</head>

<body>
    <div width>
        <button type="button" onclick="sendMessageToCSharp()">
            给Unity传参
        </button>
    </div>
    <script>
   if (window.vuplex) {
            addMessageListener();
        } else {
            window.addEventListener('vuplexready', addMessageListener);
        }
		<!-- 接收参数 -->
        function addMessageListener() {
            window.vuplex.addEventListener('message', function (event) {
                let json = event.data;
                console.log('JSON received: ' + json);
            });
        }

		<!-- 发送参数 -->
        function sendMessageToCSharp() {
            window.vuplex.postMessage({ type: 'greeting', message: 'Hello from JavaScript!' });
        }
    </script>
</body>

</html>

C#

	//webview的获取
 	private CanvasWebViewPrefab webViewPrefab;
 	//要加载的网页,本地网页 或 url都行
    private string urlPath;
    public void Awake()
    {
        urlPath = Application.streamingAssetsPath + "/Url.json";
    }
    async void Start()
    {
        webViewPrefab = GetComponent<CanvasWebViewPrefab>();
        if (File.Exists(urlPath))
        {
            string jsonData = File.ReadAllText(urlPath);
            //加载网页url
            webViewPrefab.InitialUrl = jsonData;
        }
        //等待加载
        await webViewPrefab.WaitUntilInitialized();
        //使用背景透明
        webViewPrefab.WebView.SetDefaultBackgroundEnabled(false);
        //从前端传参数到Untiy
        webViewPrefab.WebView.MessageEmitted += (sender, eventArgs) =>
        {
            Debug.Log("(C#Log)JSON received: " + eventArgs.Value);
        };
        await webViewPrefab.WebView.WaitForNextPageLoadToFinish();
    }
    //从Unity 传参数到 前端
    public void PostMessageToJS()
    {
        string time = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss");
        string PostContent = "{\"type\": \"Time\", \"message\": \"" + time + "\"}";
        webViewPrefab.WebView.PostMessage(PostContent);
    }

关于这个接收的参数的处理,直接字符串处理就行。
如果分辨率过大,导致渲染出错,加一下宏定义就可以了
Unity 内嵌前端网页与通信 (zfbrower、3dwebview),unity,前端,3d

注意,这地方有个坑,就是透明网页,在前端设置的透明,如果网页像素超过3dwebview推荐的分辨率,会导致无法透明,要在C#里写 webViewPrefab.WebView.SetDefaultBackgroundEnabled(false); 但是这个SetDefaultBackgroundEnabled的API ,旧版本没有,这里使用的是4.3.2,这个版本是有的。
优点:
1:可以播放网页视频。打开下图所示,就可以了。
Unity 内嵌前端网页与通信 (zfbrower、3dwebview),unity,前端,3d

2: 3dwebview有不同的平台的版本,找到对应版本就行。
这里提供windwos的4.3.2的版本
https://download.csdn.net/download/weixin_44347839/88616800?spm=1001.2014.3001.5503
缺点:不能实现透过网页点击的功能

插件:zfbrower(Embedded Browser)
需要添加的组件和一些canvas的设置,可参考插件提供的示例场景。
如果你发现你的示例场景跑不起来,把里面的DemoBrowserAssets.zip 解压到assets的同级目录。
加载网页、 前端到Unity,Unity到前端的参数互传使用方法:
前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	
    <button type="button" onclick="jsevent()">给Unity传参</button>  
    <script type="text/javascript">
       //接收Unity的参数
        function receivedFromUnity(item) {
				 console.log("Unity传参:"+item);
		}
    </script>
</body>
</html>

c#

  	private Browser browser;
  	private string urlPath;
  	public void Awake()
    {
        urlPath = Application.streamingAssetsPath + "/Url.json";
    }
    void Start()
    {
    	// 获取brower
        browser = GetComponent<Browser>();
       	//要加载的网页,本地网页 或 url都行
       	if (File.Exists(urlPath))
        {
            string jsonData = File.ReadAllText(urlPath);
            //加载网页url
            browser.LoadURL(jsonData,true);
        }
         //从前端传参数到Untiy
       	  browser.RegisterFunction("jsevent", (JSONNode jv) =>
        {
            Debug.Log(jv[0].Value);
        });
    }
    int t=0;
  	 void Update()
    {
         //从Unity 传参数到 前端
        if (Input.GetKeyDown(KeyCode.S))
        {
            t++;
            browser.CallFunction("receivedFromUnity", t).Done();
            //  browser.CallFunction("alert('unitytoweb')").Done();
        }
    }

优点:
能实现透过网页点击的功能,取消勾选即可。
Unity 内嵌前端网页与通信 (zfbrower、3dwebview),unity,前端,3d
想要在网页输入中文,在PointerUIGUI.cs中,有个OnSelect方法,把IMECompositionMode 改成true。
如果提示加载的连接不是私密连接,在BrowerNative.cs中有个list,commandLineSwitches,添加"–ignore-certificate-errors"。
缺点:
1:不可以播放网页视频。(ws,flv除外)
2: 只支持PC
这里提供3.1.0的版本
https://download.csdn.net/download/weixin_44347839/88616802?spm=1001.2014.3001.5503文章来源地址https://www.toymoban.com/news/detail-759122.html

到了这里,关于Unity 内嵌前端网页与通信 (zfbrower、3dwebview)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UE】Web Browser内嵌网页的使用

    1.在Edit菜单打开插件界面 搜索Web Browser并勾选,按提示重启引擎。 2.在资源窗口右键创建Widget Blueprint,并打开 3.搜索canvas panel 并拖拽到下方 4.在实验分类中找到Web Browser拖拽到Canvs Panel下 4.选中WebBrowser在右侧细节面板中的Initial URL设置默认地址 可以自定义拖拽设置网页面板的

    2024年01月24日
    浏览(31)
  • uniapp 微信小程序 内嵌H5网页办法

    如图所示 1.新建webView页面 2.跳转页面

    2024年01月20日
    浏览(65)
  • uni-app - App 平台内嵌网页物理手机自带返回键失效解决方案(内嵌的 webview 网页 H5 打包后手机物理返回键无效直接退出应用了)

    当您需要打包 App(*.apk) 平台时,发现内嵌的 H5 页面虽然可以正常显示与运行,但是手机的物理返回键却无法使用,当点击手机物理返回按键(或手势)时,直接显示 “再按一次退出应用”,而 并非返回上一个\\\"网页\\\"。 出现这种情况的原因是, 内嵌的网页与您的 App “毫无

    2024年02月09日
    浏览(80)
  • Android WebView简单应用:构建内嵌网页浏览功能

    在现代移动应用开发中,内嵌网页浏览功能是许多应用程序的常见需求。Android平台提供了WebView组件,它允许开发者将网页内容嵌入到应用中,并提供了丰富的功能和定制选项。本文将介绍如何在Android应用中使用WebView组件,帮助您快速构建简单而强大的内嵌网页浏览功能。

    2024年02月13日
    浏览(36)
  • uniapp 内嵌 webview 客服网页,呼出键盘遮挡输入框问题解决记录

    有很多情况需要在app端内嵌一个H5客服网页,但这个页面一般都是有打字的需求,但由于大部分情况下网页都是默认铺满整个画面,导致键盘弹出时出现遮挡输入框的问题。 直接上代码:

    2024年02月06日
    浏览(38)
  • 安卓开发内嵌unity

    最近参加了一个比赛,有将unity的画面嵌入到安卓的一个activity中的需求,经过网上求索,得出以下方法。 开发工具版本:unity2022.1.20、android studio2021.3.1 一、在unity中创建工程并导出                   记住勾选Export Project、Development Build选项。尽可能在导出前配置好unit

    2024年02月14日
    浏览(27)
  • Android内嵌Unity (Activity)

    Unity2019.4.4 AndropidStudio4.2.1 参考文档: Android内嵌Unity并实现互相跳转的实例代码_Android_脚本之家 Android Fragment中加载,嵌套Unity视图_unity 导入并作为fragment_周灬浩的博客-CSDN博客 本文只实现了Activity整个切换过去,而Fragment,这种像h5似的与app共存,目前还未实现,可参考的第二

    2024年01月18日
    浏览(40)
  • vue页面内嵌iframe使用postMessage进行数据交互(postMessage跨域通信)

    什么是postMessage postMessage 是 html5 引入的 API ,它允许来自 不同源 的脚本采用 异步方式进行有效的通信 ,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为 跨域通信 的一种有效的解决方案. vue父页面(嵌入iframe的页面) 在vue中要使用iframe上的pos

    2023年04月25日
    浏览(61)
  • Android/iOS内嵌Unity开发示例

    目录 前言 背景 正文 环境 新建工程 Unity导出 Android接入 如何使用 作为Activity 总结 1.Android调用Unity 2.Unity调用Android 3.C/C++“中转站” 参考资料 Unity 与 Android/iOS 交叉开发主要有两种方式,以 Android 为例,一是 Android 生成 jar 或者 aar 包,导入到 unity3d plugin/bin/ 目录下; 二是 U

    2024年02月02日
    浏览(33)
  • 小程序内嵌web-view,web-view与微信小程序通信传值

    小程序内部嵌套web-view,所有业务逻辑都在h5页面中处理;现在需要通过 转发分享好友 来实现绑定邀请人这个功能。 需要在小程序触发分享操作,来获取网页向小程序端传递的数据。 网页端 安装微信sdk包 引入 使用 小程序端 通过更改当前web-view的URL来实现。

    2024年01月15日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包