使用three.js加载视频

使用three.js加载视频,three.js,Three.js,我的问题对你们中的大多数人来说似乎很基本,但我仍在学习THREE.JS,我很难理解它 现在,我已经使用图像创建了一个滑块(我正在迭代每个纹理)。一切正常。但我想用视频替换我的两张图片。现在,我的代码如下所示: (…) 常数gl={ 摄像机:新的三视角摄像机(75,内宽/内高,0.011000), 场景:新的三个。场景(), 渲染器:新的三个.WebGLRenderer(), 加载器:新的3.TextureLoader() }; 常量纹理=[ 总帐加载程序加载('https://i.ibb.co/

我的问题对你们中的大多数人来说似乎很基本,但我仍在学习THREE.JS,我很难理解它

现在,我已经使用图像创建了一个滑块(我正在迭代每个纹理)。一切正常。但我想用视频替换我的两张图片。现在,我的代码如下所示:

(…)
常数gl={
摄像机:新的三视角摄像机(75,内宽/内高,0.011000),
场景:新的三个。场景(),
渲染器:新的三个.WebGLRenderer(),
加载器:新的3.TextureLoader()
};
常量纹理=[
总帐加载程序加载('https://i.ibb.co/myimage01.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage02.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage03.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage04.jpg')
];
(...)
阅读文档后,我明白我无法使用纹理加载程序加载视频,对吗?有解决办法吗?我如何用web上托管的一些.mp4视频替换图像,而不必重新编写所有代码

我试着做了以下几点:

var videoTexture01=新的3.VideoTexture(
'https://linktomyvideo.mp4'
);
videoTexture01.minFilter=THREE.LinearFilter;
videoTexture01.magFilter=3.LinearFilter;
videoTexture01.format=THREE.RGB格式;
常数gl={
摄像机:新的三视角摄像机(75,内宽/内高,0.011000),
场景:新的三个。场景(),
渲染器:新的三个.WebGLRenderer(),
加载器:新的3.TextureLoader()
};
常量纹理=[
视频纹理01,
总帐加载程序加载('https://i.ibb.co/myimage02.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage03.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage04.jpg')
];

但是视频没有显示,我只有一个黑屏。。(图像继续正常工作,控制台中没有任何错误)

我的坏!通过阅读文档,我找到了答案

对于那些有同样问题的人,这里是我的解决方法。我首先将视频添加到我的html文件中:


然后在我的js中:

video01=document.getElementById('video01');
视频01.播放();
const videoTexture01=新的三个VideoTexture(video01);
常数gl={
摄像机:新的三视角摄像机(75,内宽/内高,0.011000),
场景:新的三个。场景(),
渲染器:新的三个.WebGLRenderer(),
加载器:新的3.TextureLoader()
};
常量纹理=[
视频纹理01,
总帐加载程序加载('https://i.ibb.co/myimage02.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage03.jpg'),
总帐加载程序加载('https://i.ibb.co/myimage04.jpg')
];