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 update
    void 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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

CloudSat数据产品数据下载与处理 (matlab)

CloudSat数据下载 这个数据我之前和CALIPSO弄混了&#xff0c;后来发现它们虽然是同一个火箭上去&#xff0c;但是数据产品却在不同的平台下&#xff0c;CloudSat的数据更加关注云的特性&#xff0c;包括云覆盖、云水当量、云分类数据。 数据网址在&#xff1a;CloudSat网址 …

端侧大模型浪潮奔涌而至:态势、影响与建议

腾讯研究院大模型研究小分队出品 自苹果推出AI手机以来&#xff0c;端侧大模型的产品发布进入加速期。 10月10日&#xff0c;Vivo推出蓝心端侧大模型 3B&#xff0c;其AI能力已覆盖60多个国家和地区&#xff0c;服务超5亿手机用户&#xff0c;大模型token输出量超过3万亿&…

【jvm】为什么Xms和Xmx的值通常设置为相同的?

目录 1. 说明2. 避免性能开销3. 提升稳定性4. 简化配置5. 优化垃圾收集6. 获取参数6.1 代码示例6.2 结果示例 1. 说明 1.-Xms 和 -Xmx 参数分别用于设置堆内存的初始大小&#xff08;最小值&#xff09;和最大大小。2.在开发环境中&#xff0c;开发人员可能希望快速启动应用程…

Docker搭建官方私有仓库registry及相关配置

&#xff08;企业不推荐使用registry&#xff09; 在 Docker 中&#xff0c;当我们执行 docker pull xxx 的时候 &#xff0c;它实际上是从 https://registry.hub.docker.com/ 这个地址去查找&#xff0c;这就是Docker公司为我们提供的公共仓库。 在工作中&#xff0c;我们不可…

Rust编程中的浮点数比较

缘由&#xff1a;在看Rust编写的代码&#xff0c;发现了一行浮点数等于比较的代码&#xff0c;于是编辑如下内容。 在Rust中&#xff0c;进行浮点数比较时需要特别小心&#xff0c;因为浮点数由于精度限制无法精确表示小数&#xff0c;可能会导致直接比较&#xff08;如 &…

获取Hive表备注

DESCRIBE EXTENDED 表名;先获取Detailed Table Information这行的data_type字段数据&#xff0c;进行正则匹配&#xff0c;拿到表备注&#xff0c;如下&#xff1a; String str ReUtil.get("parameters:\\{(?!.*?\\().*transient_lastDdlTime.*?comment(.*?)\\}&quo…

【笔记】记一次因Spring版本和Tomcat版本不对应,造成Spring MVC项目启动后页面访问报404的问题

项目结构 pom.xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apa…

大模型,多模态大模型面试【LoRA,分类,动静态数据类型,DDPM,ControlNet,IP-Adapter, Stable Diffusion】

大模型&#xff0c;多模态大模型面试【LoRA&#xff0c;分类&#xff0c;动静态数据类型&#xff0c;DDPM&#xff0c;ControlNet&#xff0c;IP-Adapter, Stable Diffusion】 问题一&#xff1a;LoRA是用在节省资源的场景下&#xff0c;那么LoRA具体是节省了内存带宽还是显存呢…

BGP路由优选+EVPN

BGP 的路由优选规则是一套多步决策链&#xff0c;用来确定在多个可行路由中选择最优的路由。BGP 是一种路径向量协议&#xff0c;通过这些优选规则&#xff0c;网络管理员可以控制数据流量的流向&#xff0c;确保网络的稳定性和效率。下面以一个实例来详细说明 BGP 的优选规则及…

大桥局老施工员的肺腑之言:桥梁安全,为何离不开自动化监测?

随着我国桥梁数量的快速增长&#xff0c;同时既有的许多桥梁逐渐进入了养护维修阶段。有关专家认为桥梁使用超过25年以上则进入老化期&#xff1b;据统计&#xff0c;我国桥梁总数的40%已经属于“老龄”桥梁。而且随着时间的推移&#xff0c;其数量还在不断增长&#xff0c;屡屡…

项目符合行业安全标准的必要步骤与实用建议

要保障项目符合行业安全标准&#xff0c;关键在于建立全面的安全管理体系、定期进行风险评估、持续培训员工&#xff0c;以及确保合规性文件和审核流程完整。例如&#xff0c;通过建立合规文件和审核流程&#xff0c;可以系统性地跟踪项目的安全实践和合规性&#xff0c;使安全…

openpnp - 手工修改配置文件(元件高度,size,吸嘴)

文章目录 openpnp - 手工修改配置文件(元件高度,size,吸嘴)概述笔记parts.xmlpackages.xml 手工将已经存在的NT1,NT2拷贝出来改名备注END openpnp - 手工修改配置文件(元件高度,size,吸嘴) 概述 载入新板子贴片准备时&#xff0c;除了引入Named CSV文件&#xff0c;还要在ope…

Fakelocation 运动世界校园(虚拟机篇)

前言:需要一个Root虚拟机&#xff0c;Fakelocation&#xff0c;运动世界校园&#xff0c;Dia系统要求 虚拟机 | Fakelocation | MT管理器 | Dia 任务一 虚拟机&#xff08;内置root完整德尔塔环境&#xff09; 请设置一个路线模拟&#xff0c;并且定位成功&#xff0c;确保f…

redis实现分布式锁,go实现完整code

Redis分布式锁 Redis 分布式锁是一种使用 Redis 数据库实现分布式锁的方式&#xff0c;可以保证在分布式环境中同一时间只有一个实例可以访问共享资源。 实现机制 以下是实现其加锁步骤&#xff1a; 获取锁 在 Redis 中&#xff0c;一个相同的key代表一把锁。是否拥有这把锁&…

池化层笔记

池化层 文章目录 池化层二维池化层超参数池化层的分类代码实现填充和步幅 多个通道 总结 卷积对位置敏感&#xff0c;可以检测垂直边缘。需要有一定程度的平移不变性&#xff0c;而在平时图片的拍摄&#xff0c;会因为图片的照明&#xff0c;物体位置&#xff0c;比例&#xff…

React核心思维模型(一)

一、数据和视图分离&#xff0c;数据改变驱动视图更新 <div>Tom</div>如果我们想修改上述div盒子中的Tom为Jerry&#xff0c;应该怎样修改呢 在jquery中我们直接把界面元素抓过来修改 document.getElementsByTagName(div).item(0) Jerry 但在react中&#xf…

MoveIt 控制自己的真实机械臂【2】——编写 action server 端代码

完成了 MoveIt 这边 action client 的基本配置&#xff0c;MoveIt 理论上可以将规划好的 trajectory 以 action 的形式发布出来了&#xff0c;浅浅尝试一下&#xff0c;在 terminal 中运行 roslaunch xmate7_moveit_config_new demo.launch 报错提示他在等待 xmate_arm_control…

jenkins部署手册

文章目录 一、环境配置资源配置操作系统资源配置服务器 二、jenkins软件部署2.1 下载软件包2.2 启动jenkins2.2.1 准备jdk环境2.2.2 准备maven环境2.2.3 编写jenkins.service 2.3 配置jenkins2.3.1 修改插件源&#xff08;非必要不修改&#xff09;2.3.2 配置环境变量2.3.3 配置…

网络编程 UDP编程 Linux环境 C语言实现

UDP编程 1. 一般UDP编程 UDP传输特点&#xff1a;非面向连接、不可靠的、无序的 报式传输 支持组播和广播 UDP应用数据最大长度建议&#xff1a;MTU(以太网分组数据的最大长度)1500 - 20(IP头) - 8(UDP头) 1472Bytes 客户端&#xff1a;支持两种形式的代码编写: 1. 不定向…

【Python爬虫实战】深入理解Python异步编程:从协程基础到高效爬虫实现

#1024程序员节&#xff5c;征文# &#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、异步 &#xff08;一&#xff09;核心概念 &#xff08;二&#xff09;…