javascript - 使用 three.js 的 360 视频上的黑眼圈

Question

我使用 three.js 创建了一个 360 视频播放器。当视频比例为 1:2 时效果很好，但在比例为 9:16 的视频中，球体的顶部和底部出现两个黑色圆圈。

这里是代码的基础:

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

有人可以帮忙吗？我找不到任何不涉及修改 three.js 映射函数的解决方案，这是我试图避免的事情。

谢谢!

Answer 1

它对我的测试工作正常..你可以从here下载测试(注意 由于 chrome 的跨域限制，它只适用于 mozilla)它包括一个视频文件、一个 html 页面和一个 webgl.basics javascript 文件。我唯一的假设是你的视频不能不能以 16:9 的比例观看。想象一下，当您在电视上更改 DVD 电影的比例时，您会在视频上方和下方看到黑色行。在您的情况下，这些黑色行会转换为黑色圆圈，但这应该不是问题，因为您将视频定义为球体的纹理:

另请查看我的 webgl.basics.js 文件，我在其中定义了所需的一切......!