Updating Texture Uniforms in NodeMaterial

When working with Three.js NodeMaterial system, updating texture uniforms requires a slightly different approach than with standard materials. The issue in your code is related to how the texture node is created and referenced.

The Problem

In your current implementation:

JAVASCRIPTCopied
class CustomMaterial extends MeshStandardNodeMaterial {
    constructor(parameters = {}) {
        const { diffuseMap, params } = parameters;
        super(params);
        this.type = 'CustomMaterial';

        this.diffuseMap = uniform(new TextureLoader().load('a.jpg')); 
        this.colorNode = texture(this.diffuseMap.value, vec2(_uvx, _uvy));
    }
}

You're creating a texture node that references this.diffuseMap.value directly. When you later update material.diffuseMap.value, the texture node doesn't automatically update its reference.

Solution

There are a few approaches to solve this:

1. Update the texture node directly

JAVASCRIPTCopied
class CustomMaterial extends MeshStandardNodeMaterial {
    constructor(parameters = {}) {
        const { diffuseMap, params } = parameters;
        super(params);
        this.type = 'CustomMaterial';

        this.diffuseMap = uniform(new TextureLoader().load('a.jpg')); 
        this.colorNode = texture(this.diffuseMap, vec2(_uvx, _uvy));
    }
    
    updateTexture(newTexture) {
        this.diffuseMap.value = newTexture;
        this.needsUpdate = true;
    }
}

Then use it like:

JAVASCRIPTCopied
material.updateTexture(texture);

2. Create a method to rebuild the node graph

JAVASCRIPTCopied
class CustomMaterial extends MeshStandardNodeMaterial {
    constructor(parameters = {}) {
        const { diffuseMap, params } = parameters;
        super(params);
        this.type = 'CustomMaterial';
        
        this.setupTexture(new TextureLoader().load('a.jpg'));
    }
    
    setupTexture(tex) {
        this.diffuseMap = uniform(tex);
        this.colorNode = texture(this.diffuseMap, vec2(_uvx, _uvy));
        this.needsUpdate = true;
    }
}

Then update with:

JAVASCRIPTCopied
material.setupTexture(texture);

3. Pass the uniform directly to the texture node

When working with the node system, it's often better to pass the uniform node directly to the texture node rather than its value:

JAVASCRIPTCopied
class CustomMaterial extends MeshStandardNodeMaterial {
    constructor(parameters = {}) {
        const { diffuseMap, params } = parameters;
        super(params);
        this.type = 'CustomMaterial';

        this.diffuseMap = uniform(new TextureLoader().load('a.jpg')); 
        // Pass the uniform node directly, not its value
        this.colorNode = texture(this.diffuseMap, vec2(_uvx, _uvy));
    }
}

Then update with:

JAVASCRIPTCopied
material.diffuseMap.value = texture;
material.needsUpdate = true;

This approach should work because the texture node is referencing the uniform node itself, not just its initial value.

Remember that when working with the node material system, you're building a node graph that gets compiled to GLSL. Changes to the graph structure require recompilation, which is triggered by setting needsUpdate = true.