Unity WebGL 嵌入前端网页并通信

1. 前言

最近在做项目时遇到需要将 UnityWebGL 嵌入到网页中去,且需要点击网页中的按钮 UnityWebGL 可以做出响应。新建项目部分直接略过

2. 最终效果

webglResult.gif

3. 基础设置

  • 设置导出平台为WebGL
    Pasted image 20240527102413
  • 在Player Settings -> Publishing Settings 中勾选 Data CachingDecompression Fallback 选项下述链接是官方解释。
    Data Caching 简单来说就是缓存数据到本地下次打开不需要下载直接可以进入游戏
    Decompression Fallback 出现无法解析gz文件、web服务器配置错误等需勾选该选项
    Unity - 手册:WebGL Player 设置 (unity3d.com)
    Pasted image 20240527102930

4. 代码编写和导出

  • 场景搭建如下(可根据自己需求创建场景)
    Pasted image 20240527110105
  • 代码部分(将该代码挂载到创建的Cube上)

注意:方法必须是 public 否则会访问不到

using System;  
using System.Text;  
using UnityEngine;  
using UnityEngine.UI;  public class CubeRotate : MonoBehaviour  
{  public Text tx;  void Update()  {        transform.Rotate(Vector3.up * Time.deltaTime * 30, Space.World);  }  public void SetTextInfo(string info)  {        byte[] bytes = Convert.FromBase64String(info);  var decodedMessage = Encoding.UTF8.GetString(bytes);  Debug.Log($"收到消息:{info}----{decodedMessage}");  tx.text = decodedMessage;  }  public void AddScale()  {        transform.localScale += Vector3.one * 0.1f;  }  public void SubtractScale()  {        transform.localScale -= Vector3.one * 0.1f;  }
}
  • 导出WebGL (等待导出完成即可)
    Pasted image 20240527110452

如需本地浏览打包好的文件则需要下载 Firefox浏览器 ,下载完成需要一些配置具体参火狐浏览器打开webgl_火狐打开web gl-CSDN博客

5. 示例网页

考虑到有小伙伴可能不会写网页,笔者提供一个简单的网页模板供大家测试使用

使用方法:新建文本文件将下述代码粘贴进去保存并更改文件后缀为.html
Pasted image 20240527114133

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Simple Web Page</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;}.header {background-color: #333;color: white;padding: 10px;text-align: center;}.nav {background-color: #ddd;padding: 10px;text-align: center;}.nav-button {background-color: #ddd;border: none;color: #333;padding: 10px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 4px; /* 圆角边框 */}.nav-button:hover {background-color: #ccc;}.nav a {color: #333;text-decoration: none;margin-right: 10px;}.container {display: flex;justify-content: space-between;padding: 20px;}.sidebar,.main {padding: 20px;height: 550px;overflow: hidden;}.sidebar {background-color: #f0f0f0;flex: 0 0 380px; /* Fixed width for sidebar */}.main {background-color: #e0e0e0;flex: 0 0 960px; /* Fixed width for main content */}.sidebar-left {margin-right: 20px; /* Adjust the margin for the left sidebar */}.sidebar-right {margin-left: 20px; /* Adjust the margin for the right sidebar */}.footer {background-color: #333;color: white;text-align: center;padding: 10px;position: fixed;bottom: 0;width: 100%;}</style></head><body><div class="header"><h1>My Simple Web Page</h1></div><div class="nav"><button id="enlargeButton" class="nav-button">放大</button><button id="shrinkButton" class="nav-button">缩小</button><button id="infoButton" class="nav-button">设置信息</button></div><div class="container"><div class="sidebar sidebar-left"><h2>Left Sidebar</h2><p>This is the left sidebar area. It typically contains additionalinformation or links.</p></div><div class="main">WebGL网页</div><div class="sidebar sidebar-right"><h2>Right Sidebar</h2><p>This is the right sidebar area. It typically contains additionalinformation or links.</p></div></div><div class="footer"><p>Footer - Copyright &copy; 2024</p></div></body><script>// JS 代码</script>
</html>

6. 嵌入WebGL

  • 创建文件夹将打包好的WebGL和网页放在同一文件夹下,如下图(这步的主要是为了好管理,也可以不用这样做)
    Pasted image 20240527114742
  • 使用IDE打开网页,在代码中找到下图红框标记的位置
    Pasted image 20240527114359
  • 将div标签中的内容替换为下述代码,如果你的WebGL项目已经部署在服务器上,则可将iframe标签中的src链接改为服务器地址即可。(关于iframe可参考HTML Iframe (w3school.com.cn))保存后使用Firefox浏览器打开网页,已经部署在服务器上的项目则可以使用任意支持WebGL的浏览器打开。
<iframeid="webgl"style="position: relative;width: 100%;height: 100%;border: medium none;"src="../UnWeb/webgl/index.html"></iframe>

Pasted image 20240527115228
Pasted image 20240527115718

运行效果

7. 网页调用 Unity 方法

  • 在代码中找到下图红框标记的位置
    Pasted image 20240527121614
  • 将script标签中的内容替换为下述代码(代码比较简单且都有注释笔者就不做过多解释)

注意:methodName 必须和Unity中的方法名一致否则会找不到方法

    // 获取DOM中id为"webgl"的iframe元素var unWebGL = document.getElementById("webgl");// 获取放大按钮var enlargeButton = document.getElementById("enlargeButton");// 获取缩小按钮var shrinkButton = document.getElementById("shrinkButton");// 获取信息按钮var infoButton = document.getElementById("infoButton");/*** Action函数用于向iframe内的WebGL应用发送指令。* @param {string} methodName - 要调用的方法名* @param {string} message - 要传递的消息(可选)*/function Action(methodName, message) {// 获取嵌套的iframe元素var iframeB = document.getElementById("webgl");// 调用iframe内容窗口的ReceiveJSMethod方法,传递方法名和消息iframeB.contentWindow.ReceiveJSMethod(methodName, message);}// 为放大按钮添加点击事件监听器enlargeButton.addEventListener("click", function () {// 当按钮被点击时,调用Action函数,通知WebGL应用增大缩放Action("AddScale");// 可以在这里执行其他操作});// 为缩小按钮添加点击事件监听器shrinkButton.addEventListener("click", function () {// 当按钮被点击时,调用Action函数,通知WebGL应用减小缩放Action("SubtractScale");});// 为信息按钮添加点击事件监听器infoButton.addEventListener("click", function () {// 当按钮被点击时,调用Action函数,通知WebGL应用显示信息Action("SetTextInfo", "这是一条测试消息");});

Pasted image 20240527122058

  • 完成上述步骤后,使用IDE打开WebGL网页(下图中的index.html文件)
    Pasted image 20240527142351
  • 找到script标签,在该标签下找到初始化加载器的代码。并将红框中的代码添加进去。
    Pasted image 20240527143058
var unityIns = null;script.src = loaderUrl;script.onload = () => {createUnityInstance(canvas, config, (progress) => {progressBarFull.style.width = 100 * progress + "%";}).then((unityInstance) => {unityIns = unityInstance;loadingBar.style.display = "none";fullscreenButton.onclick = () => {unityInstance.SetFullscreen(1);};}).catch((message) => {alert(message);});};
  • 创建给Unity发送消息的代码,这里我们简单解释一下代码中用到的SendMessage 方法它允许你从 JavaScript 代码中调用 Unity 场景中游戏对象的特定方法。

注意:SendMessage 方法有三个参数:
目标对象名称:这是场景中游戏对象的名称,你想要调用的方法就定义在这个对象上。
方法名称:这是你想要调用的方法的名称,它应该是目标对象上脚本中的一个公共方法。
参数:这是你想要传递给方法的参数。在 Unity 的 SendMessage 中,这个参数只能是字符串类型。如果你需要传递更复杂的数据,你可能需要使用其它机制。

  • 下述方法笔者已经做了简单的封装,你只需要更改目标对象名称即可。如需更详细的解释可参考Unity - 手动:从 JavaScript 调用 Unity C# 脚本函数 (unity3d.com)
    Pasted image 20240527144539
   /*** ReceiveJSMethod 函数用于接收来自网页的指令和消息,并将它们传递给 Unity 中的对象。* @param {string} methodName - 要调用的 Unity 对象的方法名* @param {string} message - 要传递给 Unity 对象的消息(可选)*/function ReceiveJSMethod(methodName, message) {// 在控制台输出接收到的methodName和message,用于调试console.log(methodName, message);// 检查methodName是否不为nullif (methodName != null) {// 如果message也不为null,则进行处理if (message != null) {// 将文本消息转换为base64编码var base64Str = btoa(encodeURIComponent(message).replace(/%([0-9A-F]{2})/g,function (match, p1) {// 将百分比编码的序列转换回原始字符return String.fromCharCode("0x" + p1);}));// 使用Unity引擎的SendMessage方法,将methodName和base64编码的消息发送给名为"Cube"的Unity对象unityIns.SendMessage("Cube", methodName, base64Str);} else {// 如果没有message,只发送methodName给名为"Cube"的Unity对象unityIns.SendMessage("Cube", methodName);}}}

8. 结束

好了,今天就写到这吧~
对你有帮助的话可以点赞、关注、收藏,有问题评论区见哈~
原创不易,若转载请注明出处,感谢大家~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/870086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Windows API每日一练》9.1.5 自定义资源

自定义资源&#xff08;Custom Resources&#xff09;是在 Windows 程序中使用的一种资源类型&#xff0c;用于存储应用程序特定的数据、图像、音频、二进制文件等。通过自定义资源&#xff0c;开发者可以将应用程序所需的各种资源文件集中管理和存储&#xff0c;便于在程序中访…

imx6ull/linux应用编程学习(17)利用mqtt上传开发板数据,和控制开发板led(基于正点)

1.关于如何创建自己的服务器&#xff0c;可看上篇文章 imx6ull/linux应用编程学习&#xff08;16&#xff09;emqx &#xff0c;mqtt创建连接mqtt.fx-CSDN博客 2.实现任务&#xff1a;&#xff08;正点原子教程源码改&#xff09; (1)用户可通过手机或电脑远程控制开发板上的…

小白的OS Copilot 产品测评

背景 通过群友介绍才知OS Copilot 。不想错过任何优秀的AI产品。随着互联网的发展和时代的进步&#xff0c;要紧跟时代&#xff0c;了解市面上的优秀的AI科技产品。 OS Copilot 产品体验评测 1&#xff09;您的角色是什么&#xff1f;开发、运维、学生&#xff1f;如果使用O…

类和对象——【const成员】【static成员】【友元】【内部类】

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件iostream的声明&#xff0c;使用时请自行添加。 博主主页&#xff1a;Yan. yan.                        …

css文字自适应宽度动态出现省略号...

前言 在列表排行榜中通常会出现的一个需求&#xff1a;从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标&#xff0c;徽标长度是动态的&#xff0c;昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示&#xff08;花里胡哨的底色是…

若依vue集成electron实现打包exe应用程序

一、修改package.json文件,加入相关依赖和配置 {"name": "ruoyi","version": "3.8.6","description": "若依管理系统","author": "若依","license":

分层图最短路,CF 1725M - Moving Both Hands

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1725M - Moving Both Hands 二、解题报告 1、思路分析 题意看似很简单&#xff0c;就是问我们两个人分别处于1, p两个点上&#xff0c;二者同时出发&#xff0c;相遇时二者所用路径之和的最小值 不难想到求…

Git协作

文章目录 Git协作冲突冲突的发生情况解决冲突如何处理冲突 1 分支1.1 什么是Git分支1.2 创建分支 2 切换分支2.1 指向分支2.2 暂存分支切换分支与未提交更改的处理使用 Stash 临时保存更改Stash 的工作原理&#xff1a;场景设定使用 Git Stash 3 远程分支3.1 快进合并快进合并的…

Qt/QML学习-定位器

QML学习 定位器例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15Window {width: 640height: 480visible: truetitle: qsTr("positioner")Rectangle {id: rectColumnwidth: parent.width / 2height: parent.height / 2border.width: 1Col…

Qt基础控件总结—多页面切换(QStackWidget类、QTabBar类和QTabWidget类)

QStackedWidget 类 QStackedWidget 类是在 QStackedLayout 之上构造的一个便利的部件,其使用方法与步骤和 QStackedLayout 是一样的。QStackedWidget 类的成员函数与 QStackedLayout 类也基本上是一致的,使用该类就和使用 QStackedLayout 一样。 使用该类可以参考QStackedL…

iPhone数据恢复篇:在 iPhone 上恢复找回短信的 5 种方法

方法 1&#xff1a;检查最近删除的文件夹 iOS 允许您在 30 天内恢复已删除的短信。您需要先从“设置”菜单启用“过滤器”。让我们来实际检查一下。 步骤 1&#xff1a;打开“设置” > “信息”。 步骤 2&#xff1a;选择“未知和垃圾邮件”&#xff0c;然后切换到“过滤…

如何将若依vue升级到springboot3.x?

为了确保项目符合要求,Spring Boot 3.x 要求Java版本为17或更高。 1、修改根目录下的pom.xml文件 <!-- java.version版本8更换为17 --> <java.version>17</java.version><!-- 新增节点 --> <mybatis-spring-boot.version>3.0.3<

SpringMVC(3)——SpringMVC注解实战

前言 SpringMVC&#xff08;2&#xff09;——controller方法参数与html表单对应&#xff08;请求参数的绑定&#xff09; 上篇博客我们提到了controller方法的参数与html表单之间的对应关系 但是这种对应关系有很多缺点&#xff1a; 传递参数只能放在request的body当中&am…

极狐Gitlab使用(2)

目录 1. Gitlab命令行修改管理员密码 2. Gitlab服务管理 3. 公司的开发代码提交处理流程 4. Gitlab 备份与恢复 数据备份 测试数据恢复 5. 邮箱配置 1. Gitlab命令行修改管理员密码 [roottty01 ~]# gitlab-rails console -e production # 启动GitLab的Rails控制…

windows USB 设备驱动开发-USB电源管理(一)

符合通用串行总线 (USB) 规范的 USB 设备的电源管理功能具有一组丰富而复杂的电源管理功能。 请务必了解这些功能如何与 Windows 驱动程序模型 (WDM) 交互&#xff0c;特别是 Microsoft Windows 如何调整标准 USB 功能以支持系统唤醒体系结构。 基于内核模式驱动程序框架的 US…

2024年06月CCF-GESP编程能力等级认证Python编程四级真题解析

本文收录于专栏《Python等级认证CCF-GESP真题解析》,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(每题 2 分,共 30 分) 第 1 题 小杨父母带他到某培训机构给他报名参加CCF组织的GESP认证考试的第1级,那他可以选择的认证语言有几种?( ) A. 1 B. 2 C…

React文档内网搭建

React文档内网搭建流程 官网地址 官网中文地址 通过官网我们可以找到React的github存储库 ReactGitHub 在介绍中可以找到对应的文档存储库 React文档存储库 此存储库是英文文档地址,我们通过中文文档地址以及该存储库作者目录下找到中文存储库 React文档中文存储库 下载…

13个Python自动化实战脚本

1、批量文件重命名神器在工作中&#xff0c;我们常常需要对大量文件进行批量重命名&#xff0c;Python帮你轻松搞定&#xff01; 2、自动发送邮件通知告别手动发送&#xff0c;用Python编写定时发送邮件的自动化脚本。 3、定时任务自动化执行使用Python调度库&#xff0c;实现定…

高盛开源的量化金融 Python 库

GS Quant GS Quant是用于量化金融的Python工具包&#xff0c;建立在世界上最强大的风险转移平台之一之上。旨在加速量化交易策略和风险管理解决方案的开发&#xff0c;凭借25年的全球市场经验精心打造。 它由高盛的定量开发人员&#xff08;定量&#xff09;创建和维护&#…

云开发技术的壁纸小程序源码,无需服务期无需域名

1、本款小程序为云开发版本&#xff0c;不需要服务器域名 2、文件内有图文搭建教程&#xff0c;小白也不用担心不会搭建。 3、本程序反应速度极快&#xff0c;拥有用户投稿、积分系统帮助各位老板更多盈利。 4、独家动态壁纸在线下载&#xff0c;给用户更多的选择 5、最新版套图…