Hi, I want to update the texture of my 3d Model, I am using shaders to update the texture. Later i will work on mixing multiple textures.
I am passing the texture to the uniforms of the ShaderMaterial. On click of some action, i will have to update the texture. But when i update the uniforms with new texture details, It wont reflect on 3d model.
Shader:
var materialToLoad = new THREE.ShaderMaterial( {
uniforms: uniforms,
fragmentShader: fragmentShader(),
vertexShader: vertexShader()
} );
const uniforms = {
//uDecal: new THREE.Vector4(0, 0, 0, 0),
tDecal: { value: makeTexture() } //Dynamically generates the image and we need to apply that image as texture.
}
const fragmentShader = () =>
{
return `
varying vec2 vUv;
uniform sampler2D tDecal; uniform vec4 uDecal;
void main() {
//vec4 color1 = .Vector4(100, 100, 10, .3);
//vec2 offset = color1.xy + vUv / color1.zw;
gl_FragColor = texture2D(tDecal, vUv);
}
` ;
}
const vertexShader = () => {
return `
varying vec2 vUv;
void main() {
vUv = uv;
vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * modelViewPosition;
}
`;
}
On MouseMove or Click, i need to update the texture of all the mesh objects:
for(var i =0; i < arrMesh.length; i++)
{
arrMesh[i].material = materialToLoad;
arrMesh[i].material.skinning = true;
arrMesh[i].material.morphTargets = true;
arrMesh[i].material.needsUpdate = true;
arrMesh[i].material.uniformsNeedUpdate = true;
}
But the texture is not updating. Do i need to set some other property? Or my approach is not correct?