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

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

1. 3D应用数据通道

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

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

使用步骤：https://docs.pingxingyun.com/doc/730/

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

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 函数，将消息发送到用户端页面。

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 以及如何实现数据通道的具体步骤。