Is it possible to embed YouTube video without CSS3DRenderer in three.js? I'm using cardboard effect, So CSS3DRenderer won't work here.
Here is the code that i used so far. But im facing cross domain issue
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 );
.....
In animate function i have used the below code.
if (video.readyState === video.HAVE_ENOUGH_DATA ){
context.drawImage(video,0, 0);
if(videoTexture)
videoTexture.needsUpdate = true;
}
First you need to embed your youtube video in an html video tag. If you have a look on the internet you'll find a lot of ways for doing this. This may come useful to you: YouTube URL in Video Tag
After having this working you need to convert it to a THREE.Texture
, so you can map it to a mesh and use WebGL Renderer. There's a Three.js
extension for this: threex.videotexture