如何在three.js中嵌入没有CSS3DRenderer的YouTube视频

是否可以在three.js中嵌入没有CSS3DRenderer的YouTube视频？我正在使用纸板效果，所以CSS3DRenderer在这里不起作用。如何在three.js中嵌入没有CSS3DRenderer的YouTube视频

这是我迄今使用的代码。但即时通讯面临跨域问题

video = document.createElement('video'); 
video.autoplay = true; 
video.src = 'http://myurl.com/videos/video.mp4'; 
newcanvas = document.createElement('canvas'); 
context = newcanvas.getContext('2d'); 
videoTexture = new THREE.Texture(newcanvas); 
.....

在动画函数我已经使用了下面的代码。

if (video.readyState === video.HAVE_ENOUGH_DATA){ 
    context.drawImage(video,0, 0); 
    if(videoTexture) 
     videoTexture.needsUpdate = true; 
}

来源

2016-04-26 Vijay Baskaran

首先，您需要将youtube视频嵌入到html视频标记中。如果你在网上看看，你会发现很多方法来做到这一点。这可能对您有用：YouTube URL in Video Tag

这个工作后，你需要将它转换为THREE.Texture，所以你可以将它映射到网格和使用WebGL渲染器。这里有一个Three.js扩展名：threex.videotexture

来源

2016-04-26 13:31:58 leota

我只是在threex.videotexture中传递跨域url（'http://myurl.com/img/videos/sample.mp4'）。但视频不播放。 –

这里是我修改的代码。 –

这里是我修改的代码。 var canPlayMp4 \t = document.createElement（'video'）; \t var url \t =“http://myurl.com/img/videos/sample.mp4”; \t var videoTexture = new THREEx.VideoTexture（url） \t video \t = videoTexture.video; \t video.setAttribute（'crossorigin'，''）; \t videoTexture.texture.minFilter = THREE.LinearFilter; \t videoTexture.texture.magFilter = THREE.LinearFilter; \t updateFcts.push（函数（三角，现在）{ \t \t videoTexture.update（三角洲，现在） \t}） –

如何在three.js中嵌入没有CSS3DRenderer的YouTube视频

回答

相关问题