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

Questions
1

2

Hi!
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:

изображение
изображение886×860 79.5 KB

4 Likes
3

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

4

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

5

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

6

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:

7 
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;
      ${shader.vertexShader}
    `.replace(
            `#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;
      ${shader.fragmentShader}
    `.replace(
            `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.

8

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);
9

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:

10

Yes, this is the color of your model.

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

11

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:

12

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

13

Here is the sample code.
https://codesandbox.io/s/dazzling-kowalevski-oog5x

14

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

15

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