Recently, I came across this interesting example at , which uses an animated gif as a displacement map. However, the code provided in the example was based on THREE.js r58, while I am currently working on THREE.js r85 and facing some issues with compatibility.
dispTexture = new THREE.Texture(llamacanvas);
var shader = THREE.ShaderLib[ "normalmap" ];
uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "enableDisplacement" ] = { type: 'i', value: 1 };
uniforms[ "tDisplacement" ] = { type: 't', value: dispTexture };
uniforms[ "uDisplacementScale" ] = { type: 'f', value: 35 };
uniforms[ "enableDiffuse" ] = { type: 'i', value: 1 };
uniforms[ "tDiffuse" ].value = dispTexture;
uniforms[ "tNormal" ] = { type: 't', value: new
THREE.ImageUtils.loadTexture( 'flat.png' )};
In my attempt to resolve the issue, I encountered an error message when using
var shader = THREE.ShaderLib[ "normalmap" ];Uncaught TypeError: Cannot read property 'uniforms' of undefined
To address this, I replaced normalmap with normal. Although this fixed the previous error, the line
uniforms["tDiffuse"].value = dispTextureUncaught TypeError: Cannot set property 'value' of undefined
This discrepancy became evident due to significant changes between different versions of THREE.js. I'm seeking guidance on how to adapt this implementation to newer versions of THREE.js
A crucial aspect is related to geometry.computeTangents();, which existed in r58 but has been removed.
Thank you for any assistance!
Update:
I made further modifications by replacing tDiffuse with diffuse. Subsequently, I began encountering an error message every time the animation loop updated:
Uncaught TypeError: Cannot set property 'value' of undefined
The error leads me to a section within three.min.js rather than the actual example code being used:
// Code excerpt from three.min.js causing the issue...
if (c.lights && (l.ambientLightColor.value = da.ambient,
Where it seems to have trouble with da.ambient. Any suggestions on how to proceed would be greatly appreciated.