当前位置：首页 > news >正文

图扑软件 | 3D 场景视频嵌入应用

news 2025/6/18 11:20:27

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

效果展示

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

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

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

系统分析

生成视频图片

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

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

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 元素用于绘制注册图标，然后将绘制好的图标设置到相应节点上进行展示。

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.imagenode.s({'front.image': 'video'});
}

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

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 元素嵌入场景进行展示。

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 来嵌入链接所指向的内容，例如可直接嵌入视频链接以展示视频。

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

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

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 节点上，导致节点内的内容无法显示。