Question

我正在尝试在同一画布上进行多个WebGLRenderer渲染，它适用于第一帧，但是如果它在动画循环中起作用，则无法正确渲染事物。我想知道这种方法是否存在一些局限性？

如果在更新函数内调用requestAnimationFrame，则我无法使示例代码正常工作。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// + scene filler

const scene2 = new THREE.Scene();
const camera2 = new THREE.OrthographicCamera(-WIDTH / 2, WIDTH / 2, HEIGHT / 2, -HEIGHT / 2, 0, 30);
const renderer2 = new THREE.WebGLRenderer({ canvas: renderer.domElement });
renderer2.autoClear = false;
// + scene2 filler

function update() {
  renderer.render(scene, camera);
  renderer2.render(scene2, camera2);
  requestAnimationFrame(update);
}

https://codesandbox.io/s/l75w6qyw2m?module=%2Fsrc%2Findex.js

虽然我不确定会发生什么，但我真的想使它正常工作，我需要有一个单独的渲染器以使用不同的相机渲染多个场景，并且我正在寻找机会在单独的渲染器中进行操作为我的插件提供更好的公共界面。

Answer 1

在一个画布中不可能有2个WebGLRenderers。原因是每个画布都有一个WebGLContext作为本机限制，因此无法创建第二个上下文。

但是，您似乎只是想渲染两个场景，一个场景位于另一个场景之上。您可以使用一个渲染器来完成。您只需要关闭其自动清除属性，然后使用它来渲染两个场景，一个像这样在另一个场景之上：

renderer.autoClear = false;

function update() {
  renderer.render(scene, camera);
  renderer.render(hudScene, hudCamera);
  requestAnimationFrame(update);
}

单个画布上有多个WebGLRenderer

1 个答案: