Uncaught ReferenceError: THREE is not defined

GtheG 0
Viewed 22

I'm coding a threejs website. All works good but when I try to apply a FXAAShader for antialising, I get this message error in the browser terminal : terminal error

The problem seems to come from the FXAAShader.js, on the two lines where THREE is mentioned :

line 16 : value: new THREE.Vector2( 1 / 1024, 1 / 512 )

line 1116 : THREE.FXAAShader = FXAAShader;

Here is the part of the code causing the error :

let fxaaPass = new ShaderPass( FXAAShader ); // <---- Just creating this variable makes all my 3D scene disappear and causes the console error
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)

and here are the imports :

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 think it comes from an import error or something I did wrong with Webpack. Thanks for your help.

import three.js javascript
1 Answers

Well, after checking the FXAAShader, it is a function which is not exported. So the problem really comes from an import/export configuration. Just have to configure the export and it's ok.

GtheG0
Related