three.js - 我们如何在Three.js中处理WebGL上下文丢失事件

Question

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

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

Answer 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);

顺便说一句-Three.JS尚未定义LostContext，目前还不是标准方法。您可以通过执行以下操作来模拟它。

在Three.JS之前加载此脚本

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

然后，在启动渲染器之后，您可以将LosContext挂接到 Canvas 上。

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

要触发lostContext，您可以执行此操作。

renderer.context.canvas.loseContext();

然后，您也可以通过设置一定数量的调用使其失败。

renderer.context.canvas.loseContextInNCalls(5);