视频作为 Three.js 纹理贴图 VideoTexture - 文章教程

视频作为 Three.js 纹理贴图 VideoTexture

发布于 2021-08-16 字数 1064 浏览 853 评论 0

视频本质上就是一帧帧图片流构成,把视频作为 Threejs 模型的纹理贴图使用,就是从视频中提取一帧一帧的图片作为模型的纹理贴图,然后不停的更新的纹理贴图就可以产生视频播放的效果。

下面是一段视频作为纹理贴图的代码,完整代码和视频资源可以查看本站发布的Threejs视频教程8.5节


// 创建video对象
let video = document.createElement('video');
video.src = "1086x716.mp4"; // 设置视频地址
video.autoplay = "autoplay"; //要设置播放
// video对象作为VideoTexture参数创建纹理对象
var texture = new THREE.VideoTexture(video)
var geometry = new THREE.PlaneGeometry(108, 71); //矩形平面
var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

VideoTexture.js 封装了一个update函数,Threejs 每次执行渲染方法进行渲染场景中的时候,都会执行VideoTexture封装的update函数,执行update函数中代码 this.needsUpdate = true; 读取视频流最新一帧图片来更新Threejs模型纹理贴图。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

想挽留

这个人比较懒,什么都没有填写!

18 文章
3 评论
20008 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0