What kind of material is used to achieve such a transition effect?

The provided video is full of effects, so it’s not that clear what exactly you want from it.

So I have had a look into my crystal ball and tried to choose the thing you mean.
There is an old codepen, that fills a model with a color:

And its modified version, that uses modified LineBasicMaterial with depthTest: false:


It is the blue gradient transition effect from bottom to top in the video,It looks similar to the second example you gave.

If it is a face material, can it still achieve this effect? :thinking:

Pretty similar approach for a mesh material; instead of changing the opacity, change the color :thinking:

I don’t know much about the preparation of shader. Can you help me write an example for my reference? This is about the excessive effect of mesh materials. Thank you. :grinning_face_with_smiling_eyes: :grinning_face_with_smiling_eyes:

let material = new THREE.MeshBasicMaterial({
        color: 'rgb(125,196,11)',
        side: 2,
        transparent: true,
        onBeforeCompile: shader => {
          shader.uniforms.hWave = uniforms.hWave;
          shader.vertexShader = `
      varying float vPos;
            `#include <begin_vertex>`,
            `#include <begin_vertex>
        vPos = (modelMatrix * vec4(transformed, 1.0)).y;
          shader.fragmentShader = `
      #define ss(a,b,c) smoothstep(a,b,c)
      uniform float hWave;
      varying float vPos;
            `vec4 diffuseColor = vec4( diffuse, opacity );`,
      float f = ss(hWave - ${postWave}, hWave, vPos) - ss(hWave, hWave + ${preWave}, vPos);
      f = clamp(f, 0., 1.);
      f *= (1. - diffuse.b);
      vec4 diffuseColor = vec4( diffuse.r,diffuse.g,diffuse.b+f, opacity);`

I try to modify the mesh material based on your example, but I’m not sure if it’s correct.

I would go with this approach, working with colors:

f = clamp(f, 0., 1.);
//f *= (1. - diffuse.b); // no need to use this line
vec3 waveColor = vec3(0, 1, 1); // any color you want, even better to use a uniform
vec3 finalColor = mix(diffuseColor, waveColor, f); // mix the colors
vec4 diffuseColor = vec4( finalColor, opacity);

Wow, your mixing is more controllable.
Is this a diffuse?

After modifying the material, it seems that the transparency of the material cannot be set. What is the reason? :thinking:

Yes, this is the color of your model.

Only you know about what and how works in your code. :slight_smile:

I use the standard mesh material. When I set transparent to true and opacity to 0.6, mesh does not become transparent. What other parameters will affect the transparency? :grin:

Any chance to provide a minimal working live code example, that demonstrates the issue?

Here is the sample code.

Does it happen even if you don’t modify material with .onBeforeCompile?

Is this because the material of my model itself has a problem? :thinking: