Property 'uniforms' does not exist on type 'Material'

Hey,

I´m trying to implement the contact - shadows example from Threejs´s examples in Typescript/Threejs setup. If I now use the blurShadow-function from the example, console throws an error “Property ‘uniforms’ does not exist on type ‘Material’” even if I check if uniforms exists…

let result = this.blurPlane.material.hasOwnProperty("uniforms");
 if( result ) this.blurPlane.material.uniforms.tDiffuse.value = this.shadowRtt.texture;

What can I do? “result” is true, but if I want to set a tDiffuse.value, I get this error and it fails…

Already got the the solution - bit dirty to me - but it works fine

(this.blurPlane.material as THREE.ShaderMaterial).uniforms.tDiffuse.value = this.renderTargetBlur.texture;
1 Like

Just for the sake of it, in case it might be of interest :
I ran into this in react (three fiber) too.
Most elegant solution I found to avoid type casting into ShaderMaterial was to define a
const shaderMaterialRef = useRef<ShaderMaterial>(null) and then you’re good to go.

Also, goes without saying but don’t forget to pass the ref to said material and check for shaderMaterialRef.current beforehand.