Question

我有一个场景，其中2个渲染器的大小完全相同，并且相互叠加，共享相同的透视摄像头：

var renderer = new THREE.WebGLRenderer();
renderer.antialias = true;
renderer.setClearColor(0xFFFFFF, 1);
renderer.setSize(Params.win.w, Params.win.h);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.left = '0px';
renderer.domElement.style.zIndex = '-9999';
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene();

var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(Params.win.w, Params.win.h);
cssRenderer.domElement.style.position = 'absolute';
cssRenderer.domElement.style.top = '0px';
cssRenderer.domElement.style.left = '0px';
cssRenderer.domElement.style.zIndex = '-9998';
document.body.appendChild(cssRenderer.domElement);
var cssScene = new THREE.Scene();

            //animate loop

    renderer.render(scene, camera);
    cssRenderer.render(cssScene, camera);

CSS对象可以直接放在WebGL场景中的对象上，只需引用它们的位置并设置CSS对象的位置即可。

然而，当我添加此效果时：

var effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
effectFXAA.uniforms['resolution'].value.set(1 / (Params.win.w), 1 / (Params.win.h));
effectFXAA.renderToScreen = true;
var composer = new THREE.EffectComposer(renderer);
composer.setSize(Params.win.w, Params.win.h);
composer.addPass(new THREE.RenderPass(scene, camera));
composer.addPass(effectFXAA);

然后调用作曲家来渲染，就像这个composer.render();

一样

我的CSS对象不再正确放置。

视角关闭，因为当WebGL对象保持其位置时，缩放将滑动CSS对象。

任何想法为什么额外的着色器传递可能会改变WebGL渲染中的透视效果，导致CSS对象不能保持正确对齐并滑动？

Answer 1

所以我发现，尽管只有作曲家正在调用渲染，但原始渲染器还需要在你调整大小的方法中重置它的大小。

作曲家基于原始渲染器，我已经注释掉了这个对象的大小调整，只调整了作曲家的大小。

这是我必须忽略的，希望这有助于其他人！

camera.aspect = Params.win.w / Params.win.h;
camera.updateProjectionMatrix();
//MUST ALSO UPDATE RENDERER SIZE
renderer.setSize(Params.win.w, Params.win.h);
cssRenderer.setSize(Params.win.w, Params.win.h);
//composer
effectFXAA.uniforms['resolution'].value.set(1 / Params.win.w, 1 / Params.win.h);
composer.setSize(Params.win.w, Params.win.h);

Three.js：使用后期处理着色器（EffectsComposer）时，覆盖CSS渲染器不起作用

1 个答案: