Unity脚本与HTML网页互相传递参数

最新推荐文章于 2025-08-17 09:53:16 发布

原创最新推荐文章于 2025-08-17 09:53:16 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#unity #js #javascript #html #c#

Unity 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Unity 2019中发布为WebGL后与HTML页面进行交互，包括从Unity发送信息到HTML，以及从HTML接收并回传信息。通过Unity脚本调用HTML中的JavaScript函数，利用Unity的Application.ExternalCall和SendMessage方法实现数据交换。在HTML端，使用UnityInstance.SendMessage接收和发送信息，并通过alert展示接收到的数据。

小白一个,如有错误,还请斧正.

最近学Unity发布成Webgl后如何与HTML网页进行交互的问题.(不知道生成EXE文件是否可行,有兴趣的可以试试手动狗头)

我使用是Unity2019,其他版本会有不同,我也没试其他版本,仅供参考吧

Unity中:

在Unity中创建一个脚本,编辑脚本

发送信息:

在需要向外部传递信息的地方添加下面代码(第一次写的话就加在start()里吧)

 Application.ExternalCall("HelloWorld", "Hello World!");

这段代码会调用HTML中编写好的脚本HelloWorld(上面代码的第一个参数)并向外部传递信息"Hello World!"(上面代码的第二个参数

(HTML脚本怎么写在下面解释)

接收信息:

加一个用于显示信息的文本,写一个带参数的方法,比如

public Text myText;
public void GetMessage(string str)
{
      myText.Text=str;
}

将脚本挂在一个GameObject上,在Hierarchy(中文名叫层级)中右键,添加一个Text组件(在UI选项中,中文名叫文本),并将脚本的myText选择为刚添加的Text

这样,Unity脚本部分就准备好了,左上角点击文件>生成设置>Webgl>切换平台,等待平台切换完成后点击生成,选择一个合适的文件夹等待生成.

HTML中:

打开上面生成的文件夹,找到一个后缀为.html的文件,右键选择合适的工具打开(一定要选择能编写代码的软件打开,比如VS,不要用浏览器打开,浏览器打开就直接运行了),打开之后会有

var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WEBTest.json", {onProgress: UnityProgress});

这么一段话,其中"Build/WEBTest.json"会不一样,你项目叫啥,这个.json文件就叫啥,没有影响.

在这么一段话下面添加如下代码

function HelloWorld(arge)//在unity中调用的方法
		{
			unityInstance.SendMessage("Main Camera", "GetMessage", "aaa");//(拥有方法的组件,方法,参数)
			alert(arge);
		}

接收信息:

function SayHello(arge)是在unity中通过Application.ExternalCall("HelloWorld", "Hello World!");调用了HelloWorld方法,接收了参数Hello World!

alert(arge);弹出一个窗口,将数据显示出来(Debug用的,看看传没传过来数据)
发送信息:

unityInstance.SendMessage("Main Camera", "GetMessage", "aaa");//(拥有方法的组件,方法,参数)实现了向Unity传输数据,此处可见它共有三个参数:

第一个参数是挂载脚本的物体的名字(我放在了摄像机上,所以为Main Camera)

第二个参数是脚本中接收信息的方法名,和上面所述的Unity中的接收信息的方法名一致,

第三个参数是你要传回的信息,和脚本中接收信息的方法的参数的数据类型要一致

做完之后别忘记保存,ctrl+s,然后关闭编写脚本的工具,用浏览器打开你生成的.html的文件试试效果吧