Why is my effects composer outputting odd lines in Three.js

Questions
, ,
1

I am currently attempting to add FXAA post-processing onto my site but when the site is rendered on any computer it displays something like this:

download-min
download-min1920×852 232 KB

I’ve tried to replace code and mess with it but the code either doesn’t work or outputs the exact same image. The standard image when using the default renderer outputs this:

Screenshot_1
Screenshot_11920×935 204 KB

Does anyone have any suggestions on what would my next steps be in order to render this out correctly?

Here is the code I have setup for my effects composer:

  //Effects Composer
  var composer = new EffectComposer(renderer);

  //

  var renderPass = new RenderPass(scene, camera);
  var fxaaPass = new ShaderPass(FXAAShader);
  var copyPass = new ShaderPass(CopyShader);


  // Adding Effects Composer

  const pixelRatio2 = renderer.getPixelRatio();

  fxaaPass.material.uniforms['resolution'].value.x = 1 / (container.offsetWidth * pixelRatio2);
  fxaaPass.material.uniforms['resolution'].value.y = 1 / (container.offsetHeight * pixelRatio2);

  
  composer.addPass(renderPass);
  composer.addPass(fxaaPass);
  composer.addPass(copyPass);

Here is also my animation loop as well:

//Animation Loop
  function animate() {

    if (RESOURCES_LOADED == false) {
      requestAnimationFrame(animate);
      loadingScreen.box.position.x -= 0.01;
      if (loadingScreen.box.position.x < -10) {
        loadingScreen.box.position.x = 10;
      }
      loadingScreen.box.position.y = Math.sin(loadingScreen.box.position.x);
      renderer.render(loadingScreen.scene, loadingScreen.camera);
      return;

    }

    //cloud/flash animation
    cloudparticles.forEach(p => {
      p.rotation.z -= 0.002;
    });

    if (Math.random() > 0.93 || flash.power > 100) {
      if (flash.power < 100)
        flash.position.set(
          Math.random() * 400,
          300 + Math.random() * 200,
          100
        );
      flash.power = 50 + Math.random() * 500;
    }



    //object spin
    if (dazeMesh) {
      let t = clock.getElapsedTime();
      dazeMesh.position.y = Math.sin(dazeMesh.userData.initFloating + t) * .1;
      dazeMesh.rotation.y += 0.005;
    }

    //camera animation

    target.x = (1 - mouse.x) * 0.0002;
    target.y = (1 - mouse.y) * 0.0002;

    camera.rotation.x += 0.05 * (target.y - camera.rotation.x);
    camera.rotation.y += 0.05 * (target.x - camera.rotation.y);

    //render confirmation
    renderer.autoClear = false;
    renderer.clear();

    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    renderer.render(lightingScene, camera);

  }