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

Question

我使用three.js创建了一个360视频播放器。 当视频比例为1：2时，它工作正常，但在比例为9:16的视频上，我在球体的顶部和底部有两个黑色圆圈。

以下是代码的基础知识：

Copy-Item C:\source\* C:\source2 -Recurse -Force

Here is a screenshot of the top "black hole". There is another one like that at the bottom

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

谢谢！

Answer 1

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

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