black circles on 360 video using three.js

Question

I have created a 360 video player, using three.js. It works fine when the video ratio is 1:2, yet, on videos with the ratio of 9:16, I get two black circles on the top and bottom of the sphere.

Here are the fundamentals of the code:

var container, mesh;

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 75, 0.5, 1, 1100 );
    camera.target = new THREE.Vector3( 0, 0, 0 );

    scene = new THREE.Scene();

    var geometry = new THREE.SphereGeometry( 500, 60, 40 );
    geometry.scale( - 1, 1, 1 );

    var video = document.createElement( 'video' );
    video.width = 1280;
    video.height = 720;
    video.autoplay = true;
    video.loop = true;
    video.src = "56a8fd62e4b0834c57810c6f_1280x720_v2.mp4";

    var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.LinearFilter;

    var material   = new THREE.MeshBasicMaterial( { map : texture } );

    mesh = new THREE.Mesh( geometry, material );

    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( 1280, 720 );
    container.appendChild( renderer.domElement );

Here is a screenshot of the top "black hole". There is another one like that at the bottom

Can anyone please help? I can't find any solution that does not involve modifying the three.js mapping function, which is something I am trying to avoid.

Thanks!

Answer 1

It works fine for my test.. you can download the test from here(note it works only with mozilla due to cross-domain restrictions chrome has) it includes a video file, an html page and a webgl.basics javascript file.. My only assumption is that your video can't be viewed at 16:9 ratio. Imagine like when you change the ratio at a dvd movie on tv and you get the black rows over and under the video.These black rows translated to black circles in your case but it shouldn't be a problem because you define the video as a texture to the sphere:

Also have a look at my webgl.basics.js file where i define everything needed..!