Unity WebGL和JS通信

Unity 导出WebGL 嵌入网页并通信 Unity打包WebGL 并实现双向通信逻辑 阅读详情

1.Unity调用JS方法

1.1在Assets文件夹下新建Plugins文件夹并在该文件夹下新建.jslib扩展名文件(名称无所谓)

1.2 在.jslib扩展名文件新增以下代码(标准格式)

mergeInto(LibraryManager.library, {


});

1.3 创建JS方法

mergeInto(LibraryManager.library, {
   Test: function () {
    alert("Unity调用JS");
  },
   // 多个方法可用(,)逗号隔开 
   TestArgument: function(str) 
  {
      var message=UTF8ToString(str);
      alert(message);
  },
});

1.4 调用JS方法(新建空物体挂载在脚本)

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class TestJS : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Test();
    [DllImport("__Internal")]
    private static extern void TestArgument(string message);
    // Update is called once per frame
    void Update()
    {
        if (Input.GetKeyDown(KeyCode.A))
        {
            Test();
        }
        if (Input.GetKeyDown(KeyCode.B))
        {
            TestArgument("测试Unity调用JS传参方法");
        }
    }
}

1.5 打包并运行(中文乱码问题不用管,运行结果正确)

2. JS调用Unity方法

2.1 在Unity Editor下创建空物体并挂载上调用的脚本

2.2 创建方法(随便创建即可,方法必须为public)

using TMPro;
using UnityEngine;

public class TestJSInvokeUnity : MonoBehaviour
{
    public GameObject cube;
    public TMP_Text infoText;

    public void ShowCube()
    {
        cube.SetActive(true);
    }
    
    public void ShowText(string info)
    {
        infoText.text = info;
    }
}

2.3 上述操作完成后打包

2.4 完成打包后在index.html中查找unityInstance

2.5 使用unityInstance调用Unity方法

unityInstance.SendMessage('场景中挂载脚本的物体名','方法名');
unityInstance.SendMessage('场景中挂载脚本的物体名','方法名','方法对应参数');

2.6 运行查看结果

Unity3D开发之unity和js通信交互 3.Unity3D开发之unity和js通信交互(老版方法)2.C#(挂在场景 任意物体上) 阅读详情

相关推荐

js调用unity程序_Unity3D中C#和js方法相互调用

rss"/>通过查找资料,Unity3D中C#和js要相互调用彼此的方法,js文件必须放在"Standard Assets"、 "Pro Standard Assets" 和 "Plugins"这三个文件夹中的任意一个。在Scripts文件夹新建一个C#脚本csTest :public class csTest : MonoBehaviour {void Start () {jsTest ...

weixin_39945679的博客 1679

Unity WebGL C#调用JS脚本

官网文档 目录 一、Unity调用JS脚本 二、JS调用Unity脚本 一、Unity调用JS脚本 1.首先在Unity/Assets/Plugins目录下存放你需要调用的JS脚本 2.在Plugins目录下新建文本文档,后缀改为jslib。 纂写JS脚本内容: mergeInto(LibraryManager.library, { Hello: function () { window.alert("Hello, world!"); }, HelloStri

weixin_44263579的博客 9673

Unity WebGL发布实战:去Logo、本地运行与JS通信全攻略

WebGL作为一项关键的Web图形技术,允许在浏览器中直接运行高性能的3D和2D图形应用,其核心原理是基于OpenGL ES标准的JavaScript API实现。这项技术的价值在于打破了传统网页内容的表现形式,为产品展示、在线教育、数据可视化及轻量级游戏等应用场景提供了强大的交互式图形能力。在工程实践中,开发者常需将Unity引擎内容发布至WebGL平台,并面临品牌定制、本地调试和网页交互等具体挑战。本文聚焦于Unity WebGL发布流程中的【去除默认Logo】与【实现本地运行】两大核心环节,通过修改发

weixin_28049429的博客 295

Unity3D开发之WebGL平台上 unity和js前端通信交互

一.老版方法 unity发布webplayer平台后会输出html和unity3d文件。我们的程序主要被打包在unity3d文件里,而html则是网页的界面显示。 1.Unity发送消息给JS unity想要和js交互,提供了一个函数:Application**.ExternalCall()**;此函数仅限于webplayer平台下。我们编辑发布的html文件,在里面加入我们的js脚本如下: fu...

weixin_43149049的博客 1万+

Unity 2021 发布WebGL之后, 实现和网页(JS)进行交互

Unity WebGL JS 交互

LWKlwk11的博客 2631

Unity WebGL C#与JavaScript双向通信:原理、架构与实战指南

在现代Web开发中,实现不同技术栈间的通信是构建复杂应用的关键。C#与JavaScript的互操作(Interop)技术,通过特定的桥接机制,允许运行在浏览器中的Unity WebGL内容与网页生态进行深度交互。其核心原理在于利用Unity的运行时环境,在单线程模型下通过异步队列管理调用,解决了时序同步问题。这项技术的价值在于打破了Web应用的技术壁垒,使得高性能的3D图形渲染能力能够与丰富的Web API及第三方JS库无缝结合。在实际应用场景中,它广泛应用于游戏内嵌网页功能、数据可视化大屏、在线教育模拟以

weixin_29758911的博客 213

unityloader.js php,晚风/vue-unity-webgl

vue-unity-webglEasy to use Unity 5.6 or newer (also Unity 2017 or newer) WebGL player component for your VueJS application. Embed your Unity application in your application for writing interactive in...

weixin_32567181的博客 1228

基于Unity Webgl和Node js的连接数据库Mysql通信

基于Unity Webgl和Node js的连接数据库Mysql通信。

ybw233的博客 177

unity开发webGL,引用js功能。

Unity调用JS

chillxiaohan的博客 1197

JavaScript和Unity中Webgl通信技术的调用方法(易上手版本)

本文为Unity开发者提供WebGL与JavaScript交互教程,重点讲解双向调用方法:1)通过JavaScript调用Unity函数实现物体移动等屏幕操作;2)使用Unity触发JavaScript反馈(如alert提示)。针对浏览器兼容性问题(如Edge静默拦截alert),建议改用控制台输出。部署注意事项包括服务器配置和文件存放位置(需参考附带的优快云教程链接)。文章区分了两种调用场景:前端触发游戏操作时用JS调Unity,游戏状态反馈网页时用Unity调JS。目前仅实现点击按钮触发Unity操作

shaozhengan的博客 326

Unity 3d C#和Javascript脚本互相调用 解决方案

Unity 3d C#和Javascript脚本互相调用 解决方案.

Unity WebGl和前端(Angular)相互调用(含跨域问题)

在Unity官方文档中就已经介绍了Unity和JS相互调用的问题,但是我们实际的应用中往往是使用iframe来展示WebGL。这样不但是webgl和js相互调用的问题,还包含了iframe跨域的问题。我们的项目中前端使用的是angular框架,就以angular为基础来说一下这个问题,当然vue的前端框架应该都一样的原理。首先说一下unity和js相互调用的问题。

九本才的博客 2478

伪距单点定位推导+DOP值分析(附matlab仿真代码)

伪距单点定位公式推导、DOP值分析与matlab仿真分析

shannanshouyin的博客 2512

Unity WebGL与HTML深度集成实战:5步实现无缝交互与性能优化

WebGL技术作为在浏览器中运行高性能3D图形的核心标准,其原理是通过JavaScript API将硬件加速的图形渲染能力直接暴露给网页。这项技术的核心价值在于,它使得原本需要本地安装的复杂图形应用,能够以网页形式即点即用,极大地扩展了交互式内容的传播和访问场景。在游戏开发、产品可视化、在线教育等领域,将成熟的游戏引擎内容部署至Web平台已成为关键需求。Unity引擎的WebGL构建输出,正是这一技术栈的典型应用。然而,单纯构建出WebGL模块并不能保证良好的用户体验,关键在于如何将其与HTML页面进行深度

weixin_33806300的博客 332

手把手教你实现阿克曼ROS小车的运动控制

本文详细介绍了如何从零开始实现阿克曼ROS小车的运动控制。内容涵盖硬件搭建、STM32底层PID速度与舵机控制、ROS层阿克曼运动学模型解析,以及上下位机通信协议设计。通过手把手的代码示例和调试步骤,帮助机器人爱好者与开发者掌握将高级速度指令转化为小车具体动作的全流程,实现流畅的阿克曼转向控制。

weixin_29193259的博客 198

ADS124S08配置避坑指南:从SPI时序到寄存器设置,手把手教你调通24位ADC

本文详细解析了ADS124S08 24位ADC的SPI时序配置、寄存器设置及外围电路设计中的关键细节,帮助工程师避开常见陷阱。从SPI通信模式选择到DRDY引脚读取优化,再到基准电压启动时间调整,提供了实战验证的解决方案,确保高精度数据采集的稳定性。

weixin_29192365的博客 285

unity Webgl串口连接usb设备

unity Webgl串口通讯usb

chunyu90225的博客 868

[仿真实战]FDTD Solutions 8.0:从零搭建薄膜光谱分析模型

本文提供了一份基于FDTD Solutions 8.0的薄膜光谱分析模型从零搭建实战指南。通过详细步骤,手把手教你创建玻璃基底与硅薄膜的几何结构、设置仿真区域与边界条件、配置光源与监视器,并最终计算反射率与透射率光谱。内容涵盖参数扫描与优化,旨在帮助用户快速掌握FDTD仿真在纳米光子学与薄膜光学设计中的核心应用。

defi6farmer的博客 498

记录自己在unity wegl在网络请求以及JS和c#代码互调的坑

一.首先,打包注意事项: ①压缩方式选择Brotili,Gzip速度不如Brotili快,这是webgl上写的,毋庸置疑。我看过说Brotili快的,也看过说Gzip快的。准确的说应该是,Brotili加载快,但是打包过程比较慢,Gzip反之。还有第三种disable,这种就是不压缩文件,加载速度最快。根据需求自己选择吧。 ②EnableExceptions选择FullofStacks,方便打包后在网页上F12查看Debug的消息以及报错。这点很重要,跟前端好好学了学才会使用 二.网络请求 1.我用

fchewqeqweqw的博客 653

opencode 完全指南:终端AI编程助手的安装、模型配置与实战

在AI编程助手快速迭代的当下,开发者对终端环境下的自动化编码需求愈发强烈。以自然语言驱动代码修改、命令执行与测试验证,已成为提升工程效率的重要方向。这类工具普遍遵循模型无关的设计原则,通过兼容OpenAI格式的接口接入多种大模型,并借助多会话管理、Skills、Memory等机制实现可审查、可干预的闭环流程。从安装配置到日常使用,再到apihub网关与免费模型的接入,终端AI助手在代码审查、跨文件重构、浏览器自动化验证等场景中展现出独特价值。本文聚焦opencode这一开源CLI工具,详细拆解其核心定位、模

weixin_33868027的博客 417

RK3588 EVB开发板原理图讲解【六】

该原理图展示了eMMC Flash与主控芯片之间的连接关系,以及相关的电源、信号线路和去耦电容等。

weixin_48721556的博客 1165

Layer - html父网页-unity webgl子页面-unity三者信息进行交互

Layer - html父网页与unity webgl子页面信息进行交互 文章目录Layer - html父网页与unity webgl子页面信息进行交互前言一、unity与unity webgl 网页js进行通信交互1.Unity发送消息给JS2.二、使用步骤1.引入库2.读入数据总结 前言 上一篇文章介绍使用Layer.Open显示unity3d webGL网页弹窗,这篇介绍Layer - html父网页与unity webgl子页面信息进行交互,直接进入正题。 一、unity与unity webgl

qq_41594985的博客 541

2023华为od机试【最小循环子数组】C++

2023华为od机试【最小循环子数组】C++ 给定一个由若干整数组成的数组nums,请检查数组是否是由某个子数组重复循环拼接而成,请输出这个最小的子数组。

MISAYAONE的博客 2185

unity html调用webgl,Unity2018新版Webgl和网页通信 基于jslib的Unity和网页中的方法互相调用...

Application.ExternalCall()改版弃用 新版jslib官方介绍首先我们来一个最简单的jslib,用txt创建文件。文件名为__Internalplugins,后缀名为jslib。关键操作:这个文件必须放在Unity项目的Plugins文件夹下!代码如下:mergeInto(LibraryManager.library, {Hello: function () {TestSen...

weixin_34637857的博客 604

几种在NCBI中查询获取目的基因序列的方法

几种在NCBI中查询获取目的基因序列的方法 在NCBI中,如何查询并下载获得某物种的某特定功能的基因序列,相信对于看到此篇的大部分同学来说都不陌生了。想到对于刚开始接触生信的同学们来说,也许尚不能很熟练地在NCBI中查询想要的基因序列,因此在这里简要作了一个总结,希望对初学生信的同学们有所帮助。 此篇博文源于此前有同学问我,提到他导师给他布置任务,查找相关的文献,看相关文献中都报道了哪些细菌物种能够产生聚羟基脂肪酸酯(polyhydroxyalkanoate ,PHA),参与合成该产物的基因都有哪些,然后在

qq_23435961的博客 1万+

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Vue项目与Unity WebGL通信示例代码:实现前后端交互新篇章

Vue项目与Unity WebGL通信示例代码:实现前后端交互新篇章 去发现同类优质开源项目:https://gitcode.com/ 在当今Web开发领域,前后端的交互方式不断演进。今天,我们将为您推荐一个开源项目——Vue项目与Unity WebGL通信示例代码,它不仅展示了如何将Vue与Unity WebGL结合起来,还让我们看到了双向通信的无限可能。 项目介绍 Vue项目与Unity We...

gitblog_06733的博客 1235

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

上一篇: Unity HybridCLR代码热更初体验
下一篇: Unity 接入百度长文本合成语音
今天喝水了嘛.
博客等级 码龄9年 2676粉丝 31原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天喝水了嘛.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值