网站导航
> 技术文档 > 如何在网页中嵌入UE/Unity/WebGL程序，并与网页端通信_ue5 webgl

如何在网页中嵌入UE/Unity/WebGL程序，并与网页端通信_ue5 webgl

网友: 技术文档 2025-09-02 19:07:32

在数字孪生可视化场景中，UE开发的高精度大场景程序，通常需要与前端网页通信实现数据的传递，并且经过Web化后，更需要与已有业务系统进行对接。像素流提供了Web化的一种技术实现方式，但是在实际项目交付过程中，存在数据通信不畅、与系统对接和二次开发能力有限等诸多限制。商业化实时云渲染产品，将行业通用需求封装成功能组件，供开发者调用。

以LarkXR实时云渲染平台为例，初步介绍如何在网页中嵌入UE引擎三维场景，并与网页端通信。

1. 3D应用数据通道

数据通道功能组件是用来实现客户端与应用之间的双向通信的，在数字孪生、展览展示、元宇宙等场景中应用非常广泛。图示为绿色双向箭头，代表在我们云端与客户端之间的虚拟通道，为三维应用建立快速通道。在这里，我们云端处理高帧率、高清晰度的三维应用，客户端处理业务流程及其他渲染。
数据通道逻辑图

使用本功能前，请确保授权码已开通“数据通道”权限。演示链接如下：https://www.pingxingyun.com:8035/
在这里插入图片描述

使用步骤：

  1. 集成数据通道到应用
  2. GitHub下载地址
  3. UE接入数据通道、UE蓝图接入数据通道
  4. Unity接入数据通道
  5. C++ Demo

【注意】如出现UE开发应用使用数据通道组件，由应用向客户端传递字符串缺失问题时，注意需要进行utf-8编码。

int UPXYComponent::PXY_Client_SendText(FString SendData){int sendsize;std::string MyStdString(TCHAR_TO_UTF8(*SendData));sendsize = lr_client_send(DATA_STRING, MyStdString.c_str(), MyStdString.size());return sendsize;}

2. WebGL数据通道

将LarkXR升级到V3.3.2.6及以上版本，就可以使用WebGL数据通道功能组件。步骤分为：

2.1 初始化数据通道

在WebGL页面加载完成后，需要初始化数据通道。此函数会调用 window.larkxr_dc_init() 方法，完成数据通道的初始化。

2.2 接收文本数据

当用户端页面发送文本数据时，页面会调用 onDcTxtData 函数。此函数会将接收到的文本数据显示在WebGL页面上的指定 div 元素中。

2.3 接收TaskId

当数据通道连通，WebGL页面会调用 onTaskStatus 函数。此函数会接收到TaskId参数。

2.4 发送消息到用户端页面

WebGL页面上有一个按钮，点击该按钮会调用 larkxr_dc_send 函数，将消息发送到用户端页面。以下是页面的WebGL HTML 结构 Demo：

      LarkXR Data Channel Example  .fixed-size-div { width: 100px; height: 100px; background-color: lightblue; display: flex; justify-content: center; align-items: center; font-size: 14px; }    
LarkXR Data Channel Example
  
This is the target div，接收用户端页面发送的数据:  
  // 初始化数据通道 function larkxr_init() { console.log(\"Data Channel Initialized\"); window.larkxr_dc_init(); } // 接收用户端页面发送的文本数据 function onDcTxtData(data) { console.log(\"Received text data from user end:\", data); // 获取目标 div 元素 const targetDiv = document.getElementById(\'targetDiv\'); // 将参数值赋值给 div 的 innerText targetDiv.innerText = data; } // 接收当前的taskId function onTaskStatus(taskId) { console.log(\"Received task status with taskId:\", taskId); } // 页面加载完成后调用初始化函数 window.onload = function () { larkxr_init(); };

2.5 实现WebGL数据通道

1. WebGL 页面地址设置到 LarkXR

根据 LarkSR 帮助手册 3.3，添加 WebGL 程序。在手册中找到相关章节，按照说明填写 WebGL 页面的地址。

2. 使用 WebSDK 实现数据通道
  • 下载源码 从[GitHub - ParaverseTechnology/lark_sr_websdk_demos 下载 WebSDK 源码。此项目提供了如何使用 LarkSR WebSDK 创建云渲染客户端的简单介绍。
  • 参考手册 详细操作请参考 [LarkSR WebClient SDK 文档]。文档中包含了如何安装、使用 SDK 以及如何实现数据通道的具体步骤。

本文已首发于官网：https://www.pingxingyun.com/

网络标签：

相关问题