Apply color gradient to material on mesh - three.js

Question

I have an STL file loaded into my scene with a single colour applied to a phong material

I\'d like a way of applying two colours to this mesh\'s material with a grad

Answer 1

If you want your gradient to be static, you could just add a texture to your material using the .map property. Or you could assign it to the .emissiveMap property if you want it to "glow" without the need of lights.

However, if you want your gradient to change, and always fade in the z-axis, even after rotating the model or camera, you'd have to write a custom shader, which would require you to take some tutorials. You could look at this example for how to implement custom shaders in Three.js, and visit https://thebookofshaders.com/ to get a good understanding on how to write a simple gradient shader.