Unity(四十八):Unity与Web双向交互

news/2024/10/30 21:53:41/

效果

在这里插入图片描述

游戏对象绑定脚本

在这里插入图片描述

游戏脚本源码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class Tent : MonoBehaviour
{public Camera camera;// Start is called before the first frame updatevoid Start(){}// Update is called once per frame[System.Obsolete]void Update(){SendUnityMessage();}/// <summary>/// 发送数据到Web端/// </summary>[System.Obsolete]public void SendUnityMessage() {// 当前游戏对象的位置Vector3 worldPoint = transform.position;// 转换为屏幕位置Vector3 screenPoint = camera.WorldToScreenPoint(worldPoint);// w屏宽, h屏高, x位置, y位置Vector4 position = new Vector4(Screen.width, Screen.height, screenPoint.x, Screen.height - screenPoint.y);// 发送到Web端Application.ExternalCall("updatePosition2Web", transform.gameObject.name, position);}/// <summary>/// 接收来自Web的传参/// </summary>/// <param name="message">传参信息</param>public void ReceiveWebMessage(string message) {transform.position = Vector3.zero;Debug.Log(message);}
}

打包为Web应用

在这里插入图片描述

修改打包后的HTML源码

在这里插入图片描述

* {margin: 0;padding: 0;box-sizing: border-box;
}html,
body {position: relative;width: 100%;height: 100%;overflow: hidden;
}#unity-canvas,
#unity-svg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;
}
<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Unity WebGL Player</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"><link rel="manifest" href="manifest.webmanifest">
</head><body><canvas id="unity-canvas" width=900 height=600 tabindex="-1"></canvas><svg id="unity-svg"><text id="svg-text"></text></svg></div><script src="./js/d3@7.js"></script><script>var canvas = document.querySelector("#unity-canvas");let unity = null;var buildUrl = "Build";var loaderUrl = buildUrl + "/XXXXXX.loader.js";var config = {dataUrl: buildUrl + "/XXXXXX.data.unityweb",frameworkUrl: buildUrl + "/XXXXXX.framework.js.unityweb",codeUrl: buildUrl + "/XXXXXX.wasm.unityweb",streamingAssetsUrl: "StreamingAssets",companyName: "DefaultCompany",productName: "XXXXXX",productVersion: "0.1",};var script = document.createElement("script");script.src = loaderUrl;script.onload = () => {createUnityInstance(canvas, config, (progress) => {console.log('progress', progress);}).then((unityInstance) => {unity = unityInstance;}).catch((message) => {alert(message);});};document.body.appendChild(script);/*** 获取游戏对象相对于屏幕的位置* @param name      游戏对象名称* @param position  位置信息*/function updatePosition2Web(name, position) {const [w, h, x, y] = position.replace(/[()\s]/g, '').split(',');const svg = d3.select('#unity-svg').attr('viewBox', [0, 0, w, h]);d3.select('#svg-text').text(position).attr('x', x).attr('y', y).attr('fill', 'red').attr('font-size', 30).on('click', e => {console.log(name, unity);unity.SendMessage(name, "ReceiveWebMessage", "发送消息到unity!!!")});}</script>
</body></html>

http://www.ppmy.cn/news/1543196.html

相关文章

行为设计模式 -命令模式- JAVA

命令模式 一.简介二. 案例2.1 接收者&#xff08;Receiver&#xff09;2.2 命令接口实现对象&#xff08;ConcreteCommand&#xff09;2.3 调用者&#xff08; invoker&#xff09;2.4 获取Receiver对象2. 5 装配者客户端测试 三. 结论3.1 要点3.2 示例 前言 本设计模式专栏写了…

初识Linux · 动静态库(incomplete)

目录 前言&#xff1a; 静态库 动态库 前言&#xff1a; 继上文&#xff0c;我们从磁盘的理解&#xff0c;到了文件系统框架的基本搭建&#xff0c;再到软硬链接部分&#xff0c;我们开始逐渐理解了为什么运行程序需要./a.out了&#xff0c;这个前面的.是什么我们也知道了。…

我用这个 AI 工具生成单元测试,爽的一批!

本文分享如何使用驭码CodeRider 的单元测试功能生成单元测试文件。 在之前的文章如何用 Python 手撸一个 GitLab 代码安全审查工具&#xff1f;中&#xff0c;我用 Python 写了一个接受极狐GitLab 代码安全审计事件流并且将消息推送到钉钉群的脚本&#xff0c;完整的 python 代…

220V降12V1A恒流点灯WT5112

220V降12V1A恒流点灯WT5112 芯片特点 高精度恒流输出&#xff1a;WT5112 是一款适用于非隔离降压型恒流 LED 驱动芯片。在 220V 降 12V、1A 恒流点灯应用中&#xff0c;它能够提供高精度的恒流输出。其恒流精度通常可以达到 3% - 5% 左右&#xff0c;这对于 LED 灯的稳定发光非…

SQLAlchemy 连接 dm

参考链接 SQLAlchemy 框架 | 达梦技术文档 如果密码中出现特殊字符&#xff0c;参考SQLAlchemy 链接数据库&#xff0c;密码中含有或者\特殊字符_python sqlalchemy 连接mysql 密码有特殊字符-CSDN博客 问题&#xff1a;ObjectNotExecutableError: Not an executable object: …

clang-tidy 学习笔记1

1.什么是clang-tidy clang-tidy is a clang-based C “linter” tool. Its purpose is to provide an extensible framework for diagnosing and fixing typical programming errors, like style violations, interface misuse, or bugs that can be deduced via static an…

基于C语言实现的TCP客户端

目录 一、TCP客户端的工作流程 二、C语言实现TCP客户端的代码示例 1. 头文件和宏定义 2. 主函数&#xff1a;连接服务器并进行通信 代码详解 三、编译与运行 1. 编译代码 2. 运行客户端 3. 示例输出 在网络编程中&#xff0c;TCP&#xff08;传输控制协议&#xff09;…

一道关于Linux hash 解密的CTF杂项题

一道关于Linux hash 解密的CTF杂项题 题目描述: 猜猜我是用什么方法重置了对方的密码?我登入对方系统使用的密码是MyPa???????? flag为密码的md5值。黑客 192.168.80.134 服务器 192.168.80.136题目文件 $ ls -al file.pcap .r--r--r-- staff staff 54 KB Wed O…