使用Video作为带有Three.js的纹理

时间:2013-08-22 14:35:14

标签: three.js webgl

我正在尝试使用.mp4视频创建一个简单的矩形作为纹理。根据three.js文档(http://threejs.org/docs/#Reference/Textures/Texture),这应该是直截了当的。

当我放置视频链接时,我得到的只是一个黑色的盒子,上面没有纹理。我通过用jpg图像替换视频来测试代码,它工作正常。有人可以解释一下我做错了什么。

我已经看过通过首先将视频元素链接到视频元素然后在画布上复制帧来播放视频的示例。我想尝试在three.js文档中提到的直接方式。

2 个答案:

答案 0 :(得分:4)

将视频视为一系列图像。因此,要在3D对象上“播放”此视频 - 您必须将该序列的每一帧传递到您的素材,然后更新该素材。

好的起点是:https://github.com/mrdoob/three.js/wiki/Updates

在这里:http://stemkoski.github.io/Three.js/Video.html

答案 1 :(得分:0)

步骤1: 将视频添加到HTML并将其“隐藏”:

NotImplementedError: Can only union MultiIndex with MultiIndex or Index of tuples, try mi.to_flat_index().union(other) instead.

第2步:

<video id="video" playsinline webkit-playsinline muted loop autoplay width="320" height="240" src="some-video.mp4" style="display: none;"></video>