three.js - 清理 Threejs WebGl 上下文

Question

我在清理 WebGl-Scenes 时遇到问题。我正在使用 Three.js 和 WebGlRenderer。在我的应用程序中，我必须经常更改 View ，因此需要一直渲染新场景。直到现在我销毁并重新初始化整个 Threejs 场景。切换场景约 15 - 20 次后，我收到以下警告:
WARNING: Too many active WebGL contexts. Oldest context will be lost.
多次切换后，上下文完全丢失，应用程序崩溃。

有没有办法在清理时破坏当前的 WebGl 上下文？还是 WebGlRenderer 在实例化时总是创建一个新的 WebGl 上下文？

我正在使用 Three.js R64。

Answer 1

您可以为不同的场景保留相同的渲染器。渲染器并不关心它将渲染什么场景。您可以提供不同的 Scene每次打电话render()如果你喜欢。

// instantiate only once and keep it
var renderer = new THREE.WebGLRenderer();

// current scene and camera. Switch whenever you like
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(...);
fillScene(scene);

// rendering always uses current scene
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

/* ... 
 *   somewhere in your application
 * ...
 */
if(condition) {
  // switch scene
  scene = new THREE.Scene();
  fillOtherScene(scene);
}