Microsoft Edge WebGL丢失上下文

Question

我创建了一个THREE.js（最新版本，r71）应用程序，有时我需要手动删除3D场景以显示经典的2D内容。所以，我所做的是清除所有变量，如场景或渲染器，并使用renderer.forceContextLoss()

杀死WebGL上下文

此方法适用于Firefox或Chrome，但Interner Explorer或Microsoft Edge不支持，这会导致我的网页出现多个延迟。我没有像在Firefox或Chrome中那样正确地找到解决方法。

如果有人有小费，请随时告诉我：）

由于

Answer 1

尝试使用两个canvas标记，并按照建议的here将其中一个放在另一个上， 将它们放在父div标签中，然后使用以下css。

position:absolute;
left:0px;
top:0px;

修改

在回复您的评论时，请允许我澄清一下我的理解。

• 你想绘制2d和3d。
• 您正在重置webGL上下文。

您不能同时为同一个画布提供2个上下文，并且我认为您希望为您的2D内容使用不同的上下文。

如果这个假设是正确的： 我建议您同时拥有2个画布和上下文，一个包含您的webGL上下文和三维内容，另一个包含您要用于二维内容的上下文。然后使用绝对位置覆盖这些画布，使其看起来像一个画布。 这意味着您永远不必重新加载资源来切换上下文，只需确保上面的画布是透明的。

此外，如果您将画布包装在div标签中，它将不会位于页面的左上角。

但如果我的假设错了： 也许你不想使用另一个上下文而只是希望清除屏幕，在这种情况下你不应该打电话给forceContextLoss()

如果您希望继续使用webGL上下文，但清除屏幕，则应使用clear()