I am facing an issue with my 360 video player created using three.js. The player works perfectly when the video ratio is 1:2, however, for videos with a ratio of 9:16, I see two black circles appearing on the top and bottom of the sphere.
Below are the core elements 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 );
I am seeking assistance to resolve this problem without having to modify the three.js mapping function. Any help or suggestions would be greatly appreciated!
Thank you!