使用three.js的360视频上的黑色圆圈答案

【问题标题】：black circles on 360 video using three.js使用three.js的360视频上的黑色圆圈
【发布时间】：2016-02-11 23:49:16
【问题描述】：

我使用 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 映射函数的解决方案，这是我试图避免的。

谢谢！

【问题讨论】：

图像是否在黑色圆圈的周边结束，或者在这些区域没有呈现图像？你试过THREE.MeshBasicMaterial以外的其他材料吗？
没有。它没有结束。它只是错误地包裹了球体。我没有尝试过其他材料。有什么建议吗？
也许是 MeshLambertMaterial.. 我正在研究它
只改变网格 - 除了 BasicMaterial 没有任何效果。其他一切甚至都不会渲染视频
如果你可以在你的帖子中添加一个three.js标签，这样它就可以被搜索到，如果它解决了你的问题，别忘了接受一个答案

标签： javascript video three.js

【解决方案1】：

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

还可以查看我的 webgl.basics.js 文件，我在其中定义了所有需要的东西......！

【讨论】：

哇！你说的对！这就是问题所在。这是一个字母拳击！谢谢！！