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

这是一个“黑洞”的顶部截图，底部也有另一个类似的

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

谢谢！

- Yogev Hadad

---

图像是否会在黑色圆圈的边缘结束，还是在这些区域中图像没有被渲染？您尝试过THREE.MeshBasicMaterial之外的其他材质吗？ - prieston

不，它并没有结束。它只是将球体包裹错误了。 我还没有尝试其他材料。有什么建议吗？ - Yogev Hadad

或许是MeshLambertMaterial... 我正在处理这个问题。 - prieston

仅更改网格 - 只有BasicMaterial有效。其他所有内容甚至无法渲染视频。 - Yogev Hadad

请在您的帖子中添加three.js标签，以便进行搜索，并不要忘记接受解决您问题的答案。 - prieston

Answer 1

它在我的测试中运行良好。您可以从这里下载测试（请注意，由于跨域限制，它仅适用于Mozilla浏览器，而不是Chrome）。它包括一个视频文件、一个HTML页面和一个webgl.basics JavaScript文件。我唯一的假设是您的视频不能以16:9的比例查看。就像当您在电视上更改DVD电影的比例时，您会在视频上方和下方得到黑色行。在您的情况下，这些黑色行被翻译为黑色圆圈，但这不应该是问题，因为您将视频定义为球体的纹理： 此外，请查看我的webgl.basics.js文件，其中我定义了需要的所有内容！

- prieston

---

哇！你说得对！那就是问题所在。这是一种信封式的问题！谢谢！！ - Yogev Hadad