我们如何在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);

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