I have a module named ProgressIndicator:
...
export default class ProgressIndicator
{
constructor()
{
...
const indicatorGeometry = new THREE.PlaneGeometry(2, 2, 1, 1)
const indicatorMaterial = 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 indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial)
this.scene.add(indicator)
}
}
and another one called DataFetchers:
import ProgressIndicator from '../World/ProgressIndicator.js'
export default class DataFetchers extends EventEmitter
{
constructor(sources)
{
super()
this.sources = sources
...
this.ProgressIndicator = new ProgressIndicator()
}
setDataLoaders()
{
const loadingManager = new THREE.LoadingManager(
// Loaded
() =>
{
***gsap.to(indicatorMaterial.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 encounter an error stating
indicator material is not defined