Unity中嵌⼊⽹页插件EmbeddedBrowser2.1.0
背景
最近刚换了⼯作，新公司不是做⼿游的，⼀开始有点抵触，总觉得不是做游戏⾃⼰就是跨⾏了，认为⾃⼰不对⼝，但是慢慢发现在这可以学的东西⾯很⼴，所以感觉⼜到了打怪升级的时候了，⽼⼦就在这进阶了。
⼀进公司他们使⽤H5开发，做⼀款地形信息系统的软件，基于Unity开发，但是所有页⾯都是Js写的，所以我第⼀件事要做的是实现Unity嵌⼊⽹页，并实现交互。
在这⾥，领导说之前做过类似的即⽤的Embedded Browser2.1.0这个插件，让我研究下做个简单Demo。
实现⽅案
使⽤插件Embedded Browser2.1.0实现unity与⽹页交互
具体步骤
1.Unity中导⼊插件
2.新建Canvas，在Canvas下创建⼀GameObject，平铺在Canvas上
3.将⽹页映射到GameObject上
这⼀步需要给创建的BrowserGUI挂载插件脚本
⾸先是Brower脚本，此脚本是设置嵌⼊⽹页的URL以及⼀些幕布⼤⼩等参数，在这⾥说下，有两种嵌⼊⽅式
，1.可以直接嵌⼊浏览器⽹页2.可以将html⽂件放⼊与Assets⽂件夹同级的BrowserAssets（必须⼀致，必须是这个⽂件夹，因为若放Assets下⾯，会⾃动默认为代码为UnityScript⽽不是JavaScript），加载嵌⼊，这种⽅式相对快⼀些。
再⼀个就是挂载GUI Brower UI脚本，这脚本是构建UI的⼀个作⽤，请求的⽹页会显⽰出来是因为这个脚本，并且会⾃动添加上Raw Image组件
Unity通过插件与⽹页的交互
1.Unity接收⽹页操作做出响应
C#监听代码：
js代码：
Tips：Unity接收⽹页推送事件RegisterFunction(“MethodName”,CallBack);
即：⽹页进⾏⼀系列操作，unity中监听到并响应执⾏事件
2.Unity做出相应操作通知⽹页并更新⽹页显⽰
案例：此为unity⽅5秒倒计时，每轮计时结束时间重置，⽬标数+=3；通知⽹页端并显⽰的Demo
c# 代码：
Js代码：
Tips：⽹页监听Unity操作：browser.CallFunction("MethodName",params).Down();
即：unity进⾏⼀系列操作，unity通知⽹页⾃⾝变化并调⽤⽹页更新函数
完整代码
场景1：⽹页点击按钮，Unity接收参数：
c#：
1using System.Collections;
2using System.Collections.Generic;
3using UnityEngine;
4using UnityEngine.UI;
5using ZenFulcrum.EmbeddedBrowser;
6using UnityEngine.SceneManagement;
7///<summary>
8/// Unity使⽤插件控制脚本
9///</summary>
10public class DemoTexMgr : MonoBehaviour
11 {
12///<summary>
13///插件组件
14///</summary>
15 Browser browser;
16///<summary>
17///监听H5操作作出响应物体
18///</summary>
19public Transform targetScle;
20
21///<summary>
22///嵌⼊⽹页地址
23///</summary>
24string URL = "file:///C:/Users/lenovo/Desktop/⼯作/⾃测需要/测试Js脚本/TextTool.html";
25///<summary>
26///⽬标位置（显⽰同步到H5）
27///</summary>
28private Vector3 targetPos;
29public Vector3 TargetPos { get; set; }
30
31
32private void Awake()
33 {
34//获取插件Browser组件（Unity⽅使⽤插件基础⼀步）
35 browser = transform.Find("BrowserGUI").GetComponent<Browser>();
36 }
37void Start()
38 {
39 InitData();
40 }
41public void Update()
42 {
43
44 }
46///初始化函数（初始化嵌⼊页⾯）
47///</summary>
48public void InitData()
49 {
50//设置嵌⼊页⾯⽹址
51 browser.Url = URL;
52//插件前往函数
53 browser.GoForward();
54//browser.gameObject.GetComponent<RawImage>().raycastTarget = false;
55
56//改变背景深度（透明度）
57 browser.gameObject.GetComponent<RawImage>().color = new Color(browser.gameObject.GetComponent<RawImage>().color.r, browser.gameObject.GetComponent<RawImage>().color.b, browser.gameObject.GetComponent<RawImag 58
59//插件中监听函数，监听H5操作（点击缩⼩按钮，Unity做出缩⼩响应）
60 browser.RegisterFunction("displayDate", (JSONNode jk) =>
61 {
62 Debug.Log("yuanjun Unity Get H5 参数" + jk[0].AsJSON + " 参数 " + jk[1].AsJSON + "" + jk[0].Value);
63 ansform.localScale = new Vector3(0.8f, 0.8f, 0.8f);
64 });
65 browser.RegisterFunction("GetUniMethodty", (JSONNode jk) =>
66 {
67 ansform.localScale = new Vector3(float.Parse(jk[0].AsJSON), 0.8f, 0.8f);
68 Debug.Log("yuanjun Unity Get H5 GetUniMethodty 参数1" + jk[0].AsJSON);
69 });
70
71 } 96//退出按钮
97public void OnClickQuitBtn()
98 {
99 Application.Quit();
100 }
101public void ChangeBtn()
102 {
103 SceneManager.LoadScene(1);
104 }
105 }
js脚本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>类似于Jquery的JS下拉菜单</title>
6 <style type="text/css">
7 * { margin: 0; padding: 0; font-style: normal; font-family: 宋体; }
8 body { text-align: center; font-size: 12px; background:url(1.jpg) center center; }
9 #content { margin: 0 auto; width: 600px; }
10 #content #nav { height: 32px; margin-top: 60px; background-color: #464749;FILTER: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }
11 #content #nav ul { list-style: none; }
12 #content #nav ul li { float: left; width: 100px; line-height: 32px; position: relative; }
13 #nav div { width: 100px;FILTER: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; position:absolute; left:0px; top:32px; z-index:1; padding-bottom: 0px; float: left; height: 0; overflow: hidden; background-color: #fff;color:#000; }
14 #content #nav li .a { text-decoration: none; color: #FFFFFF; line-height: 32px; display: block; border-right-width: 1px; border-right-style: solid; border-right-color: #393A3C; }
15 #nav div a { text-decoration: none; color: #000; line-height: 26px; display: block; z-index:100; }
16 #nav div a:hover { background-color: #ccc; }
17 </style>
18 </head>
19 <body>
20 <div id="content">
21 <div id="nav">
22 <ul id="supnav">
23 <li><a href="#" class="a">物体变⼤</a>
24 <div>
25 <button onclick="GetUniMethodty(5)">变⼤</button>
26 </div>
27 </li>
28 <li><a href="#" class="a">物体旋转</a>
29 <div>
30 <a href="#">物体旋转</a>
31 </div>
32 </li>
33 <li><a href="#" class="a">物体缩⼩</a>
34 <div>
35 <button onclick="displayDate(1,2)">缩⼩</button>
36 </div>
37 </li>
38 <li><a href="#" class="a">导航菜单</a>
39 <div>
40 <a href="#">导航菜单</a>
41 </div>
42 </li>
43 <li><a href="#" class="a">导航菜单</a>
44 <div>
45 <a href="#">导航菜单</a>
46 </div>
47 </li>
48 <li><a href="#" class="a">导航菜单</a>
49 <div>
50 <a href="#">导航菜单</a>
51 </div>
52 </li>
53 </ul>
54 </div>
55 </div>
56 <script type="text/javascript">
57 var supnav = ElementById("supnav");
58 var nav = ElementById("nav");
59 var btns = ElementsByTagName("li");
60 var subnavs = ElementsByTagName("div");
61 var paddingbottom = 20;
62 var defaultHeight = 0;
63 function drop(obj, ivalue) {
64 var a = obj.offsetHeight;
65 var speed = (ivalue - obj.offsetHeight) / 8;
66 a += Math.floor(speed);
67 obj.style.height = a + "px";
68 }
69 load = function() {
70 for (var i = 0; i < btns.length; i++) {
71 btns[i].index = i;
72 btns[i].onmouseover = function() {
73 var osubnav = subnavs[this.index];
74 var sublinks = ElementsByTagName("a");
75 if (osubnav.firstChild.tagName == undefined) {
76 var itarheight = parseInt(osubnav.childNodes[1].offsetHeight) * sublinks.length + paddingbottom;
77 } else {
78 var itarheight = parseInt(osubnav.firstChild.offsetHeight) * sublinks.length + paddingbottom;
79 }
80 clearInterval(this.itimer);
81 this.itimer = setInterval(function() {
82 drop(osubnav, itarheight);
83 },
85 }
86 btns[i].onmouseout = function() {
87 var osubnav = subnavs[this.index];
88 clearInterval(this.itimer);
89 this.itimer = setInterval(function() {
90 drop(osubnav, defaultHeight);
91 },
92 30);
93 }
94 }
95 }
96 </script>
97
98
99 <script>
100 function displayDate(a,b){
101 alert("DisPlayData " +a );
102 return a+b;
103 }
104 </script>
105
106 <script>
107 function GetUniMethodty(s){
108 alert("Data Come " +s);
109 return s;
110 }
111 </script>
112
113
114 <script>
115 function myFunction(){
116 alert("Welcome " + "Harry Potter ");
117 }
118 </script>
119
120 </body>
121 </html>
View Code
场景2：Unity中Cube移动位置，⽹页上位置信息更新
c#：
1using System.Collections;
2using System.Collections.Generic;
3using UnityEngine;
4using UnityEngine.UI;
5using ZenFulcrum.EmbeddedBrowser;
6using UnityEngine.SceneManagement;
7public class DemoTesxMgrOne : MonoBehaviour
8 {
9///<summary>
10///插件组件
11///</summary>
12 Browser browser;
13///<summary>
14///监听H5操作作出响应物体
15///</summary>
16public Transform targetScle;
17
18///<summary>
19///嵌⼊⽹页地址
20///</summary>
21string URL = "file:///C:/Users/lenovo/Desktop/⼯作/⾃测需要/测试Js脚本/demo.html"; 22///<summary>
23///⽬标位置（显⽰同步到H5）
24///</summary>
如何制作网页插件25public delegate void del(Vector3 v);
26public del _del;
27public Vector3 oldv;
28private Vector3 targetPos;
29public Vector3 TargetPos {
30get {
31return targetPos;
32 }
33set
34 {
35 targetPos = value;
36if (oldv!=targetPos)
37 {
38 _del(targetPos);
39 oldv=targetPos;
40 }
41 } }
42
43public int TextValue = 0;
44public float timer = 5;
45
46private void Awake()
47 {
48//获取插件Browser组件（Unity⽅使⽤插件基础⼀步）
49 browser = transform.Find("BrowserGUI").GetComponent<Browser>();
50 _del += calH5;
51// oldv = ansform.localPosition;
52 }
53void Start()
54 {
55 InitData();
56 }
57public void Update()
58 {
59 TargetPos = ansform.localPosition;
60//if (timer > 0)
61//{
62// timer -= Time.deltaTime;
63//}
64//else
65//{
66// TextValue += 3;
67// timer = 5;
68// browser.CallFunction("selall", TextValue).Done();
69//}
70
71 }
72public void calH5(Vector3 v)
73 {
74 browser.CallFunction("selall", v.ToString()).Done();
75 }
76///<summary>
77///初始化函数（初始化嵌⼊页⾯）
79public void InitData()
80 {
81//设置嵌⼊页⾯⽹址
82 browser.Url = URL;
83//插件前往函数
84 browser.GoForward();
85//browser.gameObject.GetComponent<RawImage>().raycastTarget = false;
86
87//改变背景深度（透明度）
88 browser.gameObject.GetComponent<RawImage>().color = new Color(browser.gameObject.GetComponent<RawImage>().color.r, browser.gameObject.GetComponent<RawImage>().color.b, browser.gameObject.GetComponent<RawImag 89
90//插件中监听函数，监听H5操作（点击缩⼩按钮，Unity做出缩⼩响应）
91//browser.RegisterFunction("displayDate", (JSONNode jk) =>
92//{
93// Debug.Log("yuanjun Unity Get H5 参数" + jk[0].AsJSON + " 参数 " + jk[1].AsJSON + " " + jk[0].Value);
94// ansform.localScale = new Vector3(0.8f, 0.8f, 0.8f);
95//});
96//browser.RegisterFunction("GetUniMethodty", (JSONNode jk) =>
97//{
98// ansform.localScale = new Vector3(float.Parse(jk[0].AsJSON), 0.8f, 0.8f);
99// Debug.Log("yuanjun Unity Get H5 GetUniMethodty 参数1" + jk[0].AsJSON);
100//});
101
102 }
103
104//unity调试
105public void OnClickJsData()
106 {//调⽤页⾯中任何可⽤的js(⾃上⽽下)
107// browser.EvalJS("displayDate(7,5)").Then(Result =>
108// { Debug.Log(Result.Value); }
109//).Done();
110////查询页⾯中的数据，可以查看返回值(测试多返回值时好像只返回最后⼀个值)
111//browser.CallFunction("displayDate", 1, 2).Then(Result =>
112//{
113// Debug.Log(" displayDate " + Result.Value);
114//});
115
116// browser.CallFunction("selall", 100).Done();
117
118 }
119
120//退出按钮
121public void OnClickQuitBtn()
122 {
123 Application.Quit();
124 }
125public void ChangeBtn()
126 {
127 SceneManager.LoadScene(0);
128 }
129 }
js：
1 <body>
2 <!-- 我记得复选框不是这样写的？那个是下拉选择框 -->
3 <input type="checkbox" id="cb1" onclick="fun0()"/>全选/全不选
4 </br>
5 <input type="checkbox" name="love">篮球<br/>
6 <input type="checkbox" name="love">⾜球<br/>
7 <input type="checkbox" name="love">排球<br/>
8 <input type="checkbox" name="love">冰球<br/>
9
10 <input type="button" value="全选" onclick="selall()"/>
11 <input type="button" value="全不选" onclick="selno()"/>
12 <input type="button" value="反选" onclick="selother()"/>
13 <script type="text/javascript">
14 function fun0(){
15 var cb = ElementById("cb1");
16 if(cb.checked==true){
17 selall();
18 }else{
19 selno();
20 }
21 }
22 function selall(a){
23 alert(a);
24 var nodes = ElementsByName("love");
25 for(var i = 0; i < nodes.length; i++){ //遍历节点
26 var node1 = nodes[i];
27 node1.checked = true; //把节点的checked属性设置为 true
28 }
29 }
30 function selno(){
31 var nodes = ElementsByName("love");
32 for(var j = 0; j < nodes.length; j++){ //遍历节点
33 //var node2 = nodes[j];
34 //node2.checked = false;
35 nodes[j].checked = false; //把节点的checked属性设置为 false
36 }
37 }
38 </script>
39 </body>
View Code
Tips：注意以上有不少冗余代码，为什么⽤两个场景两个⽹页测试，归根结底是因为我不懂Js，我想要的事件⼀个⽆法满⾜还不会扩展，所以，重点看⽅法不看代码。
我也只是跑通了，⾥⾯还有很多⽅法函数，我这⾥只是先实现了互通，理解可能不准确或者不对，热烈欢迎指出并交流。
最近：最近在做demo时，具体遇到了这么⼏点：
1.上⾯在嵌⼊⽹页时需要挂在GUI Brower UI脚本，但是在我做demo时发现，这个脚本在这个版本还可以⽤，但是已被编辑为过时[Obsolete("Use PointerUIGUI and
CursorRendererOS instead.")]，应⽤PointerUIGUI脚本替代。
2.
js代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8">
7
8 <!-- Bootstrap CSS -->
9 <link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 10
11 <title>Ventilation UI</title>
12
13 <style>
14 html {
15 height: 100%;
16 }
17
18 body
19 {
20 font-family: Monospace;
21 font-weight: bold;
22 background-color: #ccccff00;
23 margin: 0px;
24 height: 100%;
25 overflow: hidden;
26 }
27 </style>
28
29 </head>
30 <body>
31 <!-- Optional JavaScript -->
32 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
33 <script src="code.jquery/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
34 <script src="cdnjs.cloudflare/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
35 <script src="stackpath.bootstrapcdn/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
36
37 <div class="container">
38 <div class="btn-toolbar " role="toolbar" aria-label="Toolbar">
39 <div class="btn-group mr-2" role="group" aria-label="First Group">
40 <button id="createLaneway" type="button" class="btn btn-success">新建</button>
41 <button id="editLaneway" type="button" class="btn btn-success">编辑</button>
42 <button id="drawAirDuct" type="button" class="btn btn-success">绘制</button>
43 <button id="drawAirDoor" type="button" class="btn btn-success">绘制</button>
44 <button id="drawLine" type="button" class="btn btn-success">画线</button>
45 <button id="drawFace" type="button" class="btn btn-success">画⾯</button>
46 </div>
47 <div class="btn-group mr-2" role="group" aria-label="Second Group">
48 <button type="button" class="btn btn-success">平移</button>
49 <button type="button" class="btn btn-success">旋转</button>
50 <button type="button" class="btn btn-success">缩放</button>
51 </div>
52 <div class="btn-group" role="group" aria-label="Fourth group">
53 <button id="undo" type="button" class="btn btn-success">撤销</button>
54 <button id="redo" type="button" class="btn btn-success">重做</button>
55 <button id="none" type="button" class="btn btn-success">退出编辑</button>
56 <button id="exit" type="button" class="btn btn-success">退出程序</button>
57 </div>
58 </div>
59 </div>
60
61 <script>
62 $('#createLaneway').on('click', function () { onCreateLane(); });
63 $('#editLaneway').on('click', function () { onEditLane(); });
64 $('#drawAirDuct').on('click', function () { onDrawDuct(); });
65 $('#drawAirDoor').on('click', function () { onDrawDoor(); });
66 $('#drawLine').on('click', function () { onDrawLine(); });
67 $('#drawFace').on('click', function () { onDrawFace(); });
68 $('#undo').on('click', function () { onUndo(); });
69 $('#redo').on('click', function () { onRedo(); });
70 $('#none').on('click', function () { onExitEdit(); });
71 $('#exit').on('click', function () { onExit(); });
72
73
74
75function onCreateLane(e) {
76
77 console.log('新建');
78
79 }
80
81
82function onEditLane(e) {
83
84 console.log('编辑');
85
86 }
87
88
89function onDrawDuct(e) {
90
91 console.log('绘制');
92
93 }
94
95
96function onDrawDoor(e) {
97
98 console.log('绘制');
99
100 }
101
102// 画线事件响应
103function onDrawLine(e) {
104
105 console.log('画线');
106
107 }
108
109// 画⾯事件响应
110function onDrawFace(e) {
111
112 console.log('画⾯');
113
114 }
115
116// 撤销事件响应
117function onUndo(e) {
118
119 console.log('撤销');
120
121 }
122
123// 重做事件响应
124function onRedo(e) {
125
126 console.log('重做');
127
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论