图扑 HT 3D 场景视频嵌入应用功能

在快节奏的数字时代，视频已成为信息传播和内容消费的主要形式之一。场景嵌入技术作为一种创新媒介，正在改变我们创作、分享和体验视频的方式。

场景嵌入视频的最大优势在于能够增强观众的沉浸感 。通过融合现实环境与虚拟元素，创作者可以突破传统视频制作的局限，打造更加富有创意和吸引力的内容。这种沉浸式体验不仅吸引眼球，更能够提高信息的传达效果。

接下来，让我们一同探究在 HT 中怎样把视频嵌入场景，下面会给出 2 种具体方案：

使用视频生成图片进行切换。
采用 ht-webview3d.js 插件的方式嵌入。

生成视频图片

该方案无需依赖插件 ，主要通过将视频的每一帧转换为图片，然后进行图片切换的方式来达到呈现视频的效果。只要是支持设置图片的场景，都能够实现视频的播放，并且能营造出曲面屏等独特的视觉效果。

利用 canvas 绘制图片时，以下代码中的 _memoryCtx 是与 canvas 相关的绘图上下文。

javascript 复制代码

function registerImage(width, height,node) {
    ht.Default.callLater(() => {
        node._memoryCtx.clearRect(0, 0, width, height);
        node._memoryCtx.drawImage(node._videoElement, 0, 0, width, height);
        g3d.invalidateData(node);
        registerImage(width, height,node);
    });
}

创建 video 元素用于播放视频，同时创建 canvas 元素用于绘制注册图标，然后将绘制好的图标设置到相应节点上进行展示。

javascript 复制代码

function video3dPlay(url, width, height, node) {
    var video = document.createElement('video');
    video.setAttribute("id", "video");
    video.setAttribute("controls", "controls");
    video.muted = true;
    video.setAttribute('src', ht.Default.convertURL(url));
    var memoryCanvas = document.createElement('canvas');


    memoryCanvas.width = width;
    memoryCanvas.height = height;
    memoryCanvas.dynamic = true;


    ht.Default.setImage('video', memoryCanvas);


    node._memoryCtx = memoryCanvas.getContext('2d');
    node._videoElement = video;
    video.addEventListener('ended', function (e) {
         video.play();
    });
    video.play(); // 播放
    // video.load(); // 关闭
   // video.pause(); // 暂停


    registerImage(width, height,node);
    
    // 设置图标至节点的 front.image
    node.s({
        'front.image': 'video'
    });
}

创建一个场景，并在该场景中添加用于播放视频的节点。

javascript 复制代码

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm);
g3d.addToDOM();
//使用 shape 模拟曲面屏
var mpNode = new ht.Shape();
mpNode.s3([94, 257, 501]);
mpNode.setThickness(1)
mpNode.setPoints([{"x":706.5226394664013,"y":-249.7478365643907},{"x":706.5226394664013,"y":-249.7478365643907},{"x":800.9003901097786,"y":-110.60100560287732,},{"x":801.0888811155728,"y":14.704495929240132},{"x":801.277372121367,"y":140.0099974613576,},{"x":707.2766034895778,"y":251.4741695640791},{"x":707.2766034895778,"y":251.4741695640791}]);
mpNode.setSegments([1, 4, 4])
mpNode.s({
   "all.visible": false,
   "front.visible": true
})
dm.add(mpNode);


video3dPlay("assets/ht-video.mp4",mpNode.getLength(),mpNode.getTall(),mpNode);

WebView3d 插件嵌入

此方法依赖于 ht-webview3d.js 插件。需先引入 HT 软件开发工具包（SDK），再引入该插件。通过使用 ht-webview3d.js 插件，能够将 DOM 节点直接嵌入 3D 场景中，因此可以把 video 元素嵌入场景进行展示。

javascript 复制代码

var dm = new ht.DataModel();
var g3d = new ht.graph3d.Graph3dView(dm);
g3d.addToDOM()


// 创建 WebView3d 节点，添加到 dm 中
var videoNode = new ht.WebView3d();
videoNode.s3([200, 200, 1]);
dm.add(videoNode);

ht.WebView3d 节点能够直接嵌入链接，插件内部会生成 iframe 来嵌入链接所指向的内容，例如可直接嵌入视频链接以展示视频。

javascript 复制代码

videoNode.attachDOM(ht.Default.convertURL("assets/ht-video2.mp4"), 200);

也可以在创建 video 的 DOM 节点后插入到相应的位置，方便对视频的播放进行控制。

javascript 复制代码

var video = document.createElement('video');
video.setAttribute("controls", "controls");
video.play();
video.addEventListener('ended', function (e) {
    video.play();
});
video.setAttribute('src',ht.Default.convertURL("assets/ht-video2.mp4"));
videoNode .attachDOM(video, 200)

使用此方法需要注意的是，ht-webview3d.js 插件插入视频时是添加 DOM 元素的方式实现的。因此，当场景设置了背景颜色时，该背景颜色会覆盖在 ht.WebView3d 生成的 DOM 节点上，导致节点内的内容无法显示。

在不断变化的数字媒体世界中，场景嵌入视频代表着未来的发展趋势。图扑软件将积极把握这一趋势，充分利用该方案，持续打造突破性作品，以丰富多元、高度定制的交互体验，不断刷新用户对数字可视化内容的想象与期待。