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

效果

在这里插入图片描述

游戏对象绑定脚本

在这里插入图片描述

游戏脚本源码

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.mzph.cn/pingmian/58379.shtml

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

相关文章

Docker:容器化和虚拟化

虚拟化 虚拟化是一种资源管理技术&#xff0c;它将计算机的各种实体资源&#xff08;如CPU、内存、磁盘空间、网络适配器等&#xff09;予以抽象、转换后呈现出来&#xff0c;并可供分割、组合为一个或多个电脑配置环境。这些资源的新虚拟部分是不受现有资源的架设方式、地域或…

【果蔬识别】Python+卷积神经网络算法+深度学习+人工智能+机器学习+TensorFlow+计算机课设项目+算法模型

一、介绍 果蔬识别系统&#xff0c;本系统使用Python作为主要开发语言&#xff0c;通过收集了12种常见的水果和蔬菜&#xff08;‘土豆’, ‘圣女果’, ‘大白菜’, ‘大葱’, ‘梨’, ‘胡萝卜’, ‘芒果’, ‘苹果’, ‘西红柿’, ‘韭菜’, ‘香蕉’, ‘黄瓜’&#xff09;…

mybatis数据映射(记录踩坑点)

刚开始&#xff0c;userInfo里面的id我默认以为是User表的id&#xff0c;但是后面稍微看了一下返回的数据&#xff0c;userId跟replyId一致&#xff0c;我就知道userInfo里的id指的是Reply的id&#xff08;应该是命名冲突&#xff0c;先查Reply有没有id&#xff0c;没有&#x…

【C++笔记】内存管理

前言 各位读者朋友们大家好&#xff0c;上期我们讲了类和对象下的内容&#xff0c;类和对象整体的内容我们就讲完了&#xff0c;接下来我们开启新的部分内存管理的讲解。 目录 前言一. C/C内存分布二. C语言中内存管理的方式三. C内存管理方式3.1 new/delete操作内置类型3.2…

《计算机原理与系统结构》学习系列——处理器(中)

系列文章目录 目录 流水线数据通路与控制概述5个流水级指令周期与流水级 流水线性能流水线时钟周期的长度T和数量cycles流水线性能 流水线数据通路流水线寄存器流水线分析图形化流水线流水线控制 流水线数据通路与控制 概述 5个流水级 指令周期与流水级 单周期实现中&#x…

鸿蒙网络编程系列40-TLS数字证书查看及验签示例

1. TLS数字证书验签简介 数字证书的验签是网络编程中一个重要的功能&#xff0c;它保证了数字证书的真实性&#xff0c;在此基础上&#xff0c;我们才可以信任该证书&#xff0c;从而信任基于该证书建立的安全通道&#xff0c;所以说&#xff0c;数字证书的验签是通讯安全的基…

路虎裁员,又玩出了新花样。。

大家好&#xff0c;我是程序员面试刷题平台的鸭鸭&#xff01; 最近裁员的新闻已经不少见了&#xff0c;但鸭鸭没想到&#xff0c;公司裁员的花样真是越来越多了。 最近流言中裁员比例超过 50% 的捷豹路虎&#xff0c;听说就专门为裁员开辟了一个快速离职专区&#xff1a;前一…

【Linux】使用<信号量>实现<线程互斥>(思维导图&代码演示&思路解析)

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…

【A股小探-01】股指期货交割日对股指的影响

本文来源于量化小论坛策略分享会板块精华帖&#xff0c;作者为刘世宇&#xff0c;发布于2024年5月3日。 以下为精华帖正文&#xff1a; 01 引言 自踏入 A 股市场以来&#xff0c;笔者注意到了众多所谓的“效应”与“魔咒”&#xff0c;例如黑周四、黑四月、财报季魔咒、节前效…

ios 快捷指令扩展(Intents Extension)简单使用 swift语言

本文介绍使用Xcode15 建立快捷指令的Extension&#xff0c;并描述如何修改快捷指令的IntentHandler&#xff0c;带参数跳转主应用&#xff1b;以及展示多个选项的快捷指令弹框(配置intentdefinition文件)&#xff0c;点击选项带参数跳到主应用的方法 创建快捷指令 快捷指令是…

技术干货|如何巧妙利用数字孪生技术助力口腔保健分析

行业&#xff1a; 口腔医疗 挑战&#xff1a; 传统方法缺乏预测口腔内受力状态&#xff0c;也很难从患者方面获得反馈&#xff0c;因此将口腔扫描、牙齿形状/位置识别和正畸数字模型生成的过程数字化是一个重大机会。 正畸治疗是牙科中最大的类别之一&#xff0c;随着病例的…

星巴克们需要找回节奏

“重返星巴克”需要更多运气。 作者|金豫 编辑|杨舟 国内咖啡市场正上演着一场后浪推前浪的经典剧目。 近期&#xff0c;“太平洋咖啡”传出大规模关店的消息。该品牌在多座城市中仅剩下几家门店&#xff0c;且多数集中在机场。而在2016年前后&#xff0c;太平洋咖啡一度超越…

React 前端框架全面教程:从入门到进阶

React 前端框架全面教程&#xff1a;从入门到进阶 引言 在现代前端开发中&#xff0c;React 作为一款流行的 JavaScript 库&#xff0c;以其组件化、声明式的特性和强大的生态系统&#xff0c;成为了开发者的首选。无论是构建单页应用&#xff08;SPA&#xff09;还是复杂的用…

【力扣 + 牛客 | SQL题 | 每日4题】牛客大厂面试真题W3,W10

1. 牛客大厂面试真题SQLW3&#xff1a;分析客户逾期情况 1.1 题目&#xff1a; 描述 有贷款信息表&#xff1a;loan_tb&#xff08;agreement_id&#xff1a;合同id&#xff0c;customer_id&#xff1a;客户id&#xff0c;loan_amount&#xff1a;贷款金额&#xff0c;pay_a…

在 Windows 中使用 GCC 编译运行 C++

在 Windows 中使用 GCC 编译开发 C 通过 MSYS2 安装 MinGW 工具链 MSYS2&#xff08;Minimal SYStem 2&#xff09;是一个集成了大量的GNU工具链、工具和库的开源软件包集合。它提供了一个类似于 Linux 的shell环境&#xff0c;可以在 Windows 系统中编译和运行许多 Linux 应…

铝基板PCB创建助手

支持在创建元件时创建网表 支持圆形和矩形阵列布局 支持板框信息修改 支持缺口位置修改 支持元件封装预览 支持原理图预览 支持PCB板框和布局预览 支持灯珠方向更改为切向和径向 支持报告输出 支持元件封装选择 铝基板PCB创建助手 V1.0

如何理解全局和局部的规律

再和大家聊的话题是全局和局部的辩证关系。 研究全局和局部的辩证关系&#xff0c;研究的就是做事的方法。 不过这里说的做事的方法不是具体的执行办法&#xff0c;比如这一步应该怎么做&#xff0c;那一步应该怎么做。 而是重在思考&#xff0c;应该先做什么&#xff0c;后…

GPT-Sovits-2-微调模型

1. 大致步骤 上一步整理完数据集后&#xff0c;此步输入数据, 微调2个模型VITS和GPT&#xff0c;位置在 <<1-GPT-SoVITS-tts>>下的<<1B-微调训练>> 页面的两个按钮分别执行两个文件: <./GPT_SoVITS/s2_train.py> 这一步微调VITS的预训练模型…

【LeetCode】两数之和、大数相加

主页&#xff1a;HABUO&#x1f341;主页&#xff1a;HABUO 1.两数之和 题目&#xff1a;给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一…

根据输入的详细地址解析经纬度

摘要&#xff1a; 今天遇到一个需求&#xff1a;就是做客户导入的时候因为导入的客户地址的时候没有经纬度的&#xff0c;但是同步的时候需要经纬度的&#xff0c;所以还是要根据客户提供的详细地址解析出来对应的经纬度&#xff01;回填到对应的经纬度的表单之中进行客户的同步…