How to Gradually Change Material of an Object Starting from a Specific Point?

Questions
1

Hi everyone,

I am working on a Three.js project where I need to change the material of an object gradually, starting from a specific point and expanding to cover the entire object. For example, I have a sphere, and I want its material to change starting from one point on the sphere and progressively cover the whole surface.

I am aware of how to change the material of an entire object at once, but I’m not sure how to achieve this gradual transition effect. I suspect it might involve using custom shaders, but I am not sure how to implement it.

Here is a basic idea of what I’m aiming for:

  1. Start the material change from a specific point on the object.
  2. Gradually expand the new material to cover the entire object surface over time.

Could anyone provide guidance or examples on how to achieve this? Any help or pointers to relevant resources would be greatly appreciated.

Thank you!

2

Before you jump into custom shaders - would creating a duplicate mesh and scaling it a little up be a solution?

You can apply the second texture and blend it in with and alphaMap to cover the original mesh gradually.

1 Like
3

How to Gradually Change Material…

You can’t, you can change properties of material.
It is impossible to implement two materials into one object. In the context you have in mind. You can only do this by blending in a custom shader, or by modifying native material. On the other hand, if you have parts of an object that are independent, you can group them and give them different materials, but still, you cannot blend them. Not with normal techniques.

1 Like
4

Thank you for your assistance with the shader implementation. The application I developed based on your information was successful. I am grateful for your interest and support

const vertexShader = 
    varying vec3 vPosition;
    varying vec2 vUv;

    void main() {
        vPosition = position;
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }


const fragmentShader = 
    uniform vec3 effectOrigin;
    uniform float time;
    varying vec3 vPosition;
    varying vec2 vUv;

    void main() {
        float distance = length(vPosition - effectOrigin);

        // Hexagonal pattern scaling with time
        float patternSize = 0.1 + time * 0.05;

        // Define basic color
        vec3 nanoSuitColor = vec3(0.05, 0.21, 1.0); 

        // Apply opacity based on distance and time
        float startWidth = 0.1;
        float endWidth = 1.5;
        float alpha = 1.0 - smoothstep(startWidth, endWidth, distance - time);

        gl_FragColor = vec4(nanoSuitColor, alpha);
    }