我们如何处理 Three.js 中的 webgl 上下文丢失事件 [英] How do we handle webgl context lost event in Three.js

问题描述

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

I want to handle a lost context event in Three.js. There is a nice documentation about that here but unfortunately it doesn't work when I apply it to my renderer.domElement. I try to lose the context by clicking and some variable in loseContext() are undefined.

我猜 Three.js 中的结构是不同的.有专家吗?

I guess the structure is different in Three.js. Any expert?

推荐答案

您应该能够对初始化渲染器执行类似的操作，并假设您将渲染器存储到其中的变量名为渲染器".

You should be able to do something like this about the renderer was initialized and assuming of course that the variable you stored the renderer into is named '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 定义的，它不是目前的标准方法.您可以通过执行以下操作来模拟它.

BTW - loseContext is not defined by Three.JS and it isn't a standard method as of this time. You can simulate it by doing the following.

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

Load this script before Three.JS

https://github.com/vorg/webgl 调试

然后在您启动渲染器后，您可以将 lossContext 挂接到画布上.

Then after you've started your renderer you can hook the loseContext to the canvas.

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

要触发 lossContext，您可以这样做.

To trigger the loseContext you would do this.

renderer.context.canvas.loseContext();

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

And you can then also have it fail after a set number of calls by doing this.

renderer.context.canvas.loseContextInNCalls(5);

这篇关于我们如何处理 Three.js 中的 webgl 上下文丢失事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！