全屏画布隐藏了我的 div 元素

【问题标题】：Canvas in fullscreen hides my div elements全屏画布隐藏了我的 div 元素
【发布时间】：2021-04-11 14:41:26
【问题描述】：

我目前正在使用 panolens.js 和 three.js 进行 360 度全景项目。 Panolens 有全屏模式，但问题是进入全屏模式后，画布隐藏了我所有的 div 元素。我有一个文本元素显示加载了哪个图像。我试图提出解决方案，例如在画布本身中创建文本，但这对我来说非常困难，因为画布使用 WebGL 上下文。我可以得到一些帮助或任何解决方案的建议吗？提前致谢。

Here 是我的包含问题的项目。

【问题讨论】：

你试过this solution吗？如果可行，这是一个重复的问题。
这不是我正在寻找的解决方案。我试过用一些css解决这个问题，但没有运气。画布进入完全全屏模式，覆盖整个屏幕，隐藏我页面上的其他元素。

标签： javascript html css three.js

【解决方案1】：

对不起，如果这可能是评论，我还没有声誉。

我发现post 与您的问题类似，建议将元素放入 panolens 容器中。

我在您的项目中使用 devtools 进行了尝试，我采用了具有“#sceneName”id 的元素，并使其成为“.panolens-container”div 的子元素，它似乎可以解决问题。所以基本上不是下面的结构：

<body>
    <center>
        <h1 id="sceneName">Hovedinngang</h1>
    </center>
    <div class="panolens-container" ...>
        <canvas/>
        ...
    </div>
<body>

这是必需的（我没有对此进行测试，但也许 center 标签也可以移到此处）：

<body>
    <div class="panolens-container" ...>
        <canvas/>
        <h1 id="sceneName">Hovedinngang</h1>
        ...
    </div>
<body>

【讨论】：