0

我有一个场景，其中 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 对象不再正确放置。

透视是关闭的，因为缩放会滑动 CSS 对象，而 WebGL 对象会保留它们的位置。

知道为什么额外的着色器通道可能会改变 WebGL 渲染中的透视图，导致 CSS 对象无法正确对齐并四处滑动吗？

4

1 回答 1

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);
于 2014-01-22T17:05:29.860 回答