Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网）

最新推荐文章于 2025-03-24 10:37:42 发布

Project Retreat

最新推荐文章于 2025-03-24 10:37:42 发布

阅读量1w

点赞数 16

文章标签： ajax java javascript 物联网 webgl

本文链接：https://blog.youkuaiyun.com/Koweico/article/details/111195285

版权

本文代码基于一个智慧楼宇项目：

前提：(Unity应该使用尽量最新的版本，2020年的应该就行，2019年的未知‘，2018年的好像就不行了)

模式简介：

1.服务端处理楼宇发送的信息，把处理过的信息发送给前端页面，前端页面模型产生变化交互，实现从现实到模型的交互。
2.人为在浏览器端触发模型事件，该前端页面实现向服务端发送信息，服务端再处理数据，给楼宇相应硬件发送信息，实现从模型到现实的交互。

本文着重介绍Unity导出的WebGL、网页前端、服务端之间的交互，硬件由于实际情况不同，仅示范一般情况。

一、现实到模型。

1.从unity导出webgl，实现在网页端查看模型。在unity选择导出为webgl，勾选上Development Build，以便编程。（后续还要对unity中的代码进行修改，可以先不急着导出，看完再动工。）
在这里插入图片描述

2.导出之后会有一个文件夹，里面分别是一个html文件、Build文件夹、TemplateDate文件夹。将这三者全部都部署在服务器上。我这里用的是Tomcat，则webapp文件结构如下。
在这里插入图片描述
3.修改index.html的内容：可以发现html文件自带了一部分javascript代码
在集中声明变量处增加一个声明temp（1行）：

   var container = document.querySelector("#unity-container");
   var canvas = document.querySelector("#unity-canvas");
   var loadingBar = document.querySelector("#unity-loading-bar");
   var progressBarFull = document.querySelector("#unity-progress-bar-full");
   var fullscreenButton = document.querySelector("#unity-fullscreen-button");
   var temp;//-------------------添加-------------------------

在这里插入图片描述
在接下来的代码中为temp赋值（添加1行）：

      script.onload = () => {
   
        createUnityInstance(canvas, config, (progress) => {
   
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
   
          temp=unityInstance;//---------------添加--------------------
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
   
            unityInstance.SetFullscreen(1);
          };
        }).catch((message) => {
   
          alert(message);
        });
      };