Hey, Im having a scene in a angular component which is being created and destroyed on button click. When the component is loaded, threejs is used to build up a scene and dynamically create a object. On destroy the scene is disposed.
Now when activating the component the first time, everything is more dark and strong color and shiny.
When killing the scene and activating it again, everything looks more foggy and white.
I traced the problem down to these two lines:
this._renderer.gammaFactor = 2.2
this._renderer.outputEncoding = THREE.GammaEncoding
When deleting them, everything looks as Im activating the component the first time, dark and strong color, everytime.
That means that the encoding affect my scene only on second activation. But why? Is it because the models are cached and loaded faster, I had troubles sometimes with onLoad functions.
I tried to update the materials manually with mat.needsUpdate = true. And the same for all the textures tex.encoding = THREE.sRGBEncoding; tex.needsUpdate = true; but nothing works.
I just need some hints. Its kinda hard to show code.
// Renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
this.renderer.outputEncoding = THREE.GammaEncoding
this.renderer.gammaFactor = 2.2
this.renderer.setPixelRatio(window.devicePixelRatio)
this.renderer.setSize(window.innerWidth, window.innerHeight)
this.renderer.shadowMap.enabled = true
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
// Material creation and texture loading example
`static getMaterial(color: string, texturePath: string, texture?: THREE.Texture, options?: Options) : THREE.MeshStand`ardMaterial {
if(options == undefined)
options = {}
let mat = new THREE.MeshStandardMaterial({
color: color,
transparent: options.alpha ? true : false,
side: options.alpha ? THREE.DoubleSide : THREE.FrontSide,
envMap: Color._reflectionMap,
envMapIntensity: 1,
metalness: .1,
roughness: .43,
})
if(texture != null) {
texture.anisotropy = Color.anisotropy
mat.map = texture
if(options.bumpMap) {
mat.bumpMap = texture
mat.bumpScale = .001
}
mat.needsUpdate = true
}
if(texturePath != null) {
// TextureManager is basicly a TextureLoader and a array
// of key(texture) value(model.clone()) pairs. Its cloned if it already exists
// or loaded if not
TextureManager.instance.load(Globals.PATH + texturePath, (texture)=> {
texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
texture.encoding = THREE.sRGBEncoding
texture.anisotropy = Color.anisotropy
texture.needsUpdate = true
mat.map = texture
if(options.bumpMap) {
mat.bumpMap = texture
mat.bumpScale = .001
}
mat.needsUpdate = true
})
}
return mat
}