javascript - 三.js EffectComposer 浏览器窗口调整大小问题

标签 javascript three.js rendering

我的渲染设置在调整浏览器窗口大小时出现调整大小问题。

我渲染两个场景,其中一个用于应用后处理效果的对象。对于效果,我使用示例目录中的 THREE.EffectComposer 和着色器。

然后,在另一个着色器示例的帮助下,将两个场景渲染进行相加混合。


请参阅以下简化设置:http://jsbin.com/hibum/18/edit?js,output (在 HTML 部分中,我包含了来自 Three.js 存储库的一些 js 源)

如果缩小输出面板,然后重新加载页面并再次加宽面板,您将看到如下内容:

The second scene rendering did not update correctly

主场景(蓝色球体)确实更新了其渲染尺寸,但效果场景(橙色球体)仍然具有相同的分辨率,只是放大了。

我无法找出需要在浏览器调整大小事件中更新哪个渲染目标或渲染器(或着色器统一?)才能在调整大小后仍然正确输出图像。

对于主 Composer ,它使用 setSize() 调用,但如果我在效果 Composer 上执行此操作,它不会渲染效果场景。

感谢任何帮助,谢谢。

最佳答案

我必须重置两个 EffectComposer,然后还重置 AdditiveBlendShader 的 tDiffuse2 制服:

main.reset();  
effects.reset();  

blend.uniforms.tDiffuse2.value = effects.renderTarget2;

参见http://jsbin.com/hibum/23/edit?js,output

关于javascript - 三.js EffectComposer 浏览器窗口调整大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23460040/

相关文章:

python - textfield 和 charfield 的渲染去掉了额外的空白(Django/Python)

javascript - 文件上传/输入文件 我无法上传 .exe 文件

javascript - Jquery 动画和淡入淡出效果在一起

javascript - three.js Raycaster 似乎一直在动画的第一个关键帧的基础上工作

javascript - 如何在 Three.js 形状几何中添加正面和背面纹理?

java - Swing 无法正确渲染我的 JPanel

javascript - 在 Laravel 中通过 Ajax 获取表单中的数据

javascript - 如何使用 overflow-y 滚动到 div 中的元素

javascript - 三.AngularJS Directive中的JS对象渲染

python - matplotlib 中的慢速 Line2D 渲染