Javascript 使用three.js的360视频上的黑圈

我用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 );

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

---

谢谢

它对我的测试很有效。。您可以从下载测试（注意由于chrome的跨域限制，它仅适用于mozilla）。它包括一个视频文件、一个html页面和一个webgl.basics javascript文件。。我唯一的假设是你的视频不能以16:9的比例观看。想象一下，当你在电视上的dvd电影上更改比率时，视频上下都会出现黑色的行。在你的例子中，这些黑色的行被转换成黑色的圆圈，但这不应该是一个问题，因为你将视频定义为球体的纹理：

---

还可以查看我的webgl.basics.js文件，其中定义了所需的所有内容

图像是在黑色圆圈的周长处结束，还是在未渲染图像的这些区域结束？您是否尝试过三种材料之外的其他材料。MeshBasicMaterial？不，它不会结束。它只是把球体包错了。我没有试过其他材料。有什么建议吗？也许是材料。。我正在努力改变只是网格-没有工作，但基本材料。如果你可以在你的帖子中添加一个three.js标签，这样它就可以被搜索，如果它解决了你的问题，别忘了接受答案哇！你是对的！这就是问题所在。这是一个字母拳击！谢谢