Reproduce material/color/light effects 🌈🔦 | Three.js | Page 1

sharp ingot Jul 29, 2023, 11:21 AM

#

My guess is that the gradient is done with a custom shader using e.g. world space normal.z to grade between the two shades on each object. There are also ways you can do that with lights but I'd have to think more about it. 🙂

bleak dragon Jul 29, 2023, 11:30 AM

#

Thanks for your help Steven !

Oh I'm quiet new to theses concepts, you mean I have to try to apply some "world space normal.z " shaders in order to get that gradient effect ?
Will it adapt when the object moves ? In this portfolio, the gradient "remains" in the same position no matter the object rotation so that's why I thought about lights from bottom and top. And I was hoping it would be easy to do for a newbie like me 🤣

If you think it's your first guess, I will need to find out how to do that with R3F

bleak dragon Jul 29, 2023, 3:05 PM

#

Is there a way to affect a light to only one object ?
I figured out that hemisphereLight was kinda doing the trick for me, but after adding it with every mesh, it was "stacking" the lights and making my meshes close to white
(I'm using React Three Fiber)

bleak dragon Jul 31, 2023, 5:14 PM

#

I managed to mimic the hemisphereLight with this approach (thanks ChatGPT):

  const vertexShader = `
    varying vec3 vNormal;

    void main() {
      vNormal = normalize(normalMatrix * normal);
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `

  const fragmentShader = `
    varying vec3 vNormal;

    uniform vec3 topColor;
    uniform vec3 bottomColor;

    void main() {
      float intensity = 0.5 * (dot(vNormal, vec3(0.0, 1.2, 0.0)) + 1.4);
      vec3 color = mix(bottomColor, topColor, intensity);
      gl_FragColor = vec4(color, 1.0);
    }
  `

  const customHemisphereLightMaterial = new ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    uniforms: {
      topColor: { value: new Color(topColor) },
      bottomColor: { value: new Color(bottomColor) },
    },
  })

But I couldnt have that balloon effect with the roughness white light

Maybe this approach is overkill, and I could do it in another way ?

#

#Reproduce material/color/light effects 🌈🔦