javascript - ThreeJS 中的交叉淡入淡出场景从 101 > 107 升级

Question

我找到了an example作者:Fernando Serrano，介绍了如何在 ThreeJS 中的 2 个场景之间交叉淡入淡出。 Here is使用 ThreeJS 101 进行稍微修改的 JSFiddle 版本。现在解决我的问题...

将 ThreeJS 升级到最新版本 (107) 时，WebGLRenderer 发生了一些更改。 renderTarget 和 forceClear 参数已从其 render 函数中删除。我尝试过 update my JSFiddle一切似乎都工作正常，但我的控制台显示了很多错误!

我似乎无法弄清楚问题出在哪里。设置渲染目标和清除渲染器的顺序重要吗？我可以对两个渲染目标使用相同的渲染器吗？

如果有人能向我解释我做错了什么，那就太好了!

Answer 1

I can't seem to figure out what the problem might be. Is the order or setting the render target and clearing the renderer important?

是的，确实如此。将 WebGLRenderer 视为状态机。您首先必须通过 .setRenderTarget() 指定是否使用渲染目标。在下一步中，您可以执行可选的清除和相应的渲染。

在第 103 行，您设置了 renderer.setRenderTarget(this.fbo)，尽管 renderer.setRenderTarget(null) 是正确的。也可以使用官方example作为代码模板。我已经从那里采用了修复程序。

Can I use the same renderer for both render targets?

是的，没问题。

修复 fiddle :https://jsfiddle.net/3b498ozw/

三.js R107