three.jsgoogle-cardboard

How to embed YouTube video without CSS3DRenderer in three.js


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;
}

Solution

  • 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.jsextension for this: threex.videotexture