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

原创

Paraverse平行云

修改于 2025-09-12 15:01:37

6990

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

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

1. 3D应用数据通道

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

使用本功能前，请确保授权码已开通“数据通道”权限。

使用步骤：

【注意】如出现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：

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LarkXR Data Channel Example</title>
        <style>
            .fixed-size-div {
                width: 100px;
                height: 100px;
                background-color: lightblue;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <h1>LarkXR Data Channel Example</h1>
        <button onclick="larkxr_dc_send('Hello from WebGL page!')">发送消息"Hello from WebGL page!"到用户端页面</button>
        <div class="fixed-size-div">This is the target div，接收用户端页面发送的数据:
            <span id="targetDiv"></span>
        </div>
        <script>
            // 初始化数据通道
            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();
            };
        </script>
    </body>
    </html>

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

云渲染