切换全屏模式后黑屏 (panolens.js/three.js)答案

【问题标题】：Black screen after toggling fullscreen mode (panolens.js/three.js)切换全屏模式后黑屏 (panolens.js/three.js)
【发布时间】：2021-01-06 06:20:32
【问题描述】：

我正在使用一个名为 panolens 的库来显示全景（360 度）视图，这取决于 three.js，我的应用程序有两个视图，其中一个具有自定义内容，另一个用作容器panolens，默认情况下第一个视图是可见的（有display: block），panolens 容器是隐藏的（有display: none），并且有两个按钮可以在两个视图之间切换（翻转每个容器的显示属性），也有是一个使用requestFullscreen 方法切换到全屏模式的按钮。

当我切换全屏模式（进入然后退出全屏模式）然后切换到 panoles 视图时，它显示黑屏。

活生生的例子

codepen

浏览器

[x] 全部

操作系统

[x] 全部

【问题讨论】：

您是否在浏览器控制台中看到任何错误或警告？
@Mugen87 不，控制台没有错误。

标签： javascript three.js

【解决方案1】：

我在 Google chrome 上验证了您的问题，并在您的 CSS 文件中更改了以下属性：

#container-y{
/*   display: none; */
}

然后它按预期运行。

以某种方式将 Panolens 容器初始化为 display : none 混淆了 panolens-canvas，它是在容器 id（此处为 container-y）内自动生成的，因此它的宽度和高度设置为零。

【讨论】：