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

Question

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

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

Answer 1

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

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