Currently working on a threejs website, everything was going smoothly until I attempted to implement FXAAShader for antialiasing. Unfortunately, I encountered an error message in the browser terminal: https://i.sstatic.net/g51Kf.png
The issue seems to be originating from the FXAAShader.js file, specifically on the lines mentioning THREE:
line 16 : value: new THREE.Vector2( 1 / 1024, 1 / 512 )
line 1116 : THREE.FXAAShader = FXAAShader;
Highlighted below is the section of code causing the problem:
let fxaaPass = new ShaderPass( FXAAShader );
fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * Math.min(window.devicePixelRatio, 2) )
fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * Math.min(window.devicePixelRatio, 2) )
composer.addPass(fxaaPass)
Furthermore, here are the imported modules:
import './style.css'
import * as THREE from 'three'
import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass'
import {EffectComposer} from 'three/examples/jsm/postprocessing/EffectComposer'
import { FXAAShader} from 'three/examples/js/shaders/FXAAShader'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import {UnrealBloomPass} from 'three/examples/jsm/postprocessing/UnrealBloomPass'
I suspect this error may be related to an import issue or possibly something misconfigured with Webpack. Any assistance would be greatly appreciated.