I have one module called LoadingBar:
...
export default class LoadingBar
{
constructor()
{
...
const overlayGeometry = new THREE.PlaneGeometry(2, 2, 1, 1)
const overlayMaterial = new THREE.ShaderMaterial
({
//wireframe: true,
transparent: true,
uniforms:
{
uAlpha: {value: 0.5}
},
vertexShader: `
void main()
{
gl_Position = vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float uAlpha;
void main()
{
gl_FragColor = vec4(0.0, 0.0, 0.0, uAlpha);
}
`
})
const overlay = new THREE.Mesh(overlayGeometry, overlayMaterial)
this.scene.add(overlay)
}
}
and another called Resources:
import LoadingBar from '../World/LoadingBar.js'
export default class Resources extends EventEmitter
{
constructor(sources)
{
super()
this.sources = sources
...
this.LoadingBar = new LoadingBar()
}
setLoaders()
{
const loadingManager = new THREE.LoadingManager(
// Loaded
() =>
{
***gsap.to(overlayMaterial.uniforms.uAlpha, { duration: 3, value: 1 })***
},
// Progress
() =>
{
console.log('progress')
}
)
this.gltfLoader = new GLTFLoader(loadingManager)
this.loaders = {}
this.loaders.gltfLoader = new GLTFLoader()
this.loaders.textureLoader = new THREE.TextureLoader()
this.loaders.cubeTextureLoader = new THREE.CubeTextureLoader(loadingManager)
}
Despite importing it I get an error saying overlay material is not defined I cant see why it cant access the loading Bar module? I have deleted as much unnecessary code as I think I possibly can without making it impossible to answer
I PUT ASTERIKS where on the line that gives the error.
The variable overlayMaterial is only available locally inside the class LoadingBar. If you want it to be available elsewhere, you will have to define it outside of the LoadingBar class (it does not like you are, it is not clear from your example...), and export it separately:
export const overlayMaterial = [your code here]
You can then import in your other module:
import {overlayMaterial} from "../World/LoadingBar.js"