three.js模拟显示屏模型播放视频

参考资料:threejs中文网

threejs qq交流群:814702116

three.js模拟显示屏模型播放视频

需求:在有些Web3D项目中,有一个虚拟屏幕网格模型,你希望屏幕网格模型能模拟播放视频。

思路非常简单,你可以获取图片 创建纹理对象 Texture,作为材质.map的纹理贴图。同样方式,你也可以获取视频 创建纹理对象,作为.map属性的值。

1. 建模软件设置好UV

使用三维软件建模的过程中,比如使用Blender时候,要把表示虚拟屏幕的Mesh,UV设置好,这样方便代码中添加纹理贴图。可以让美术在建模软件中,先随机设置一张图片作为纹理,验证UV是否设置好。

比如咱们这节课中模型,创建显示屏模型的时候,单独一个矩形平面Mesh表示显示屏,用来添加视频纹理。

2. video元素加载纹理

video是html5的一个元素,可以用来加载播放视频,如果不熟悉,可以去补充下相关的前端知识点。

js 复制代码
const video = document.createElement('video');
video.src = "./医院宣传.mp4";
video.loop = true;

3. 视频创建纹理VideoTexture

通过VideoTexture可以把video生成一个纹理,给材质map属性赋值。

js 复制代码
const video = document.createElement('video');
video.src = "./医院宣传.mp4";
video.loop = true;
// 视频生成纹理对象
const texture = new THREE.VideoTexture(video);
// 获取矩形平面Mesh(显示屏)设置map
model.getObjectByName('电视').material = new THREE.MeshBasicMaterial({
    map: texture
})

4. 播放视频video.play()

视频纹理起作用,非常简单,直接播放视频video即可,视频的每一帧图像数据会在材质.map上更新。整个原理非常简单,就是视频在播放的过程中,threejs会获取视频当前时间对应的一帧图像作为纹理。

js 复制代码
video.play();

现在很多浏览器不允许视频加载的时候,默认播放,这一点要注意。比如你可以在某个鼠标或键盘事件触发视频的播放。

js 复制代码
addEventListener('mousedown', () => {
    video.play();
});

注意:gltf加载的模型,纹理.flipY 、颜色空间问题

如果你是给gltf模型里面屏幕Mesh设置纹理贴图,纹理贴图方向错误(注意UV坐标正确的情况下),注意.flipY属性的设置。

js 复制代码
texture.flipY = false;

还有颜色空间的问题,如果颜色空间设置不对,可能会出现纹理颜色与正常颜色不一致的问题。

js 复制代码
texture.colorSpace  = THREE.SRGBColorSpace;//新版本
js 复制代码
texture.encoding = THREE.sRGBEncoding;//旧版本
相关推荐
JarvanMo几秒前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒20 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用22 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥38 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端