我们如何在 Three.js 中处理 webgl 上下文丢失事件答案

【问题标题】：How do we handle webgl context lost event in Three.js我们如何在 Three.js 中处理 webgl 上下文丢失事件
【发布时间】：2017-08-28 14:31:04
【问题描述】：

我想在 Three.js 中处理丢失的上下文事件。关于here 有一个很好的文档，但不幸的是，当我将它应用到我的renderer.domElement 时它不起作用。我尝试通过单击来丢失上下文，loseContext() 中的一些变量未定义。

我猜 Three.js 的结构不同。有专家吗？

【问题讨论】：

标签： three.js webgl

【解决方案1】：

您应该能够对渲染器进行初始化并且假设您存储渲染器的变量名为“renderer”。

renderer.context.canvas.addEventListener("webglcontextlost", function(event) {
    event.preventDefault();
    // animationID would have been set by your call to requestAnimationFrame
    cancelAnimationFrame(animationID); 
}, false);

renderer.context.canvas.addEventListener("webglcontextrestored", function(event) {
   // Do something 
}, false);

顺便说一句-looseContext 不是由 Three.JS 定义的，而且它不是目前的标准方法。您可以通过执行以下操作来模拟它。

在 Three.JS 之前加载这个脚本

https://github.com/vorg/webgl-debug

然后，在您启动渲染器后，您可以将 lostContext 连接到画布。

renderer.context.canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(renderer.context.canvas);

要触发 lostContext，您可以这样做。

renderer.context.canvas.loseContext();

然后你也可以通过这样做在一定数量的调用后让它失败。

renderer.context.canvas.loseContextInNCalls(5);

【讨论】：

如果你不使用 Three.js，你能告诉我你会怎么做吗？换句话说，如果您使用的是原始 WebGL API。谢谢。
在将webgl-debug.js与ThreeJS一起使用时，我发现在使用renderer.context.canvas.loseContext();之前必须手动调用renderer.context.canvas.getContext("webgl");
上下文丢失可以在three.js中模拟如下：renderer.context.getExtension('WEBGL_lose_context').loseContext();
gl.getExtension('WEBGL_lose_context').loseContext(); 似乎适用于任何 webgl2 上下文，无论是否为three.js