Question

我想在Three.js中处理丢失的上下文事件。有一个关于here的很好的文档，但不幸的是，当我将它应用到我的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);

BTW - lostContext不是由Three.JS定义的，它不是目前的标准方法。您可以通过执行以下操作来模拟它。

在Three.JS

之前加载此脚本

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

然后，在启动渲染器后，您可以将loseContext挂钩到画布。

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

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

renderer.context.canvas.loseContext();

然后，您可以通过执行此操作在一定数量的调用后使其失败。

renderer.context.canvas.loseContextInNCalls(5);

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

1 个答案: