See also WebGL How It Works for the color interpolation animation (v_color is interpolated between v0, v1 and v2).

It's a cuboid of which one end is blue, the other end is red. but the color is gradient.

As Mugen87 said: > It's important to know that the three.js material system was not designed for easy enhancements of custom shader code. Meaning you have to study the system, the respective shader chunks and their semantics so you are able to enhance a custom material with shader code from the built-in materials. There is no simple "plug and play" mechanism.

* Online example demo (code) * Material: Added onBeforeCompile() #11475

Maybe you are right. I haven't tried it in three.js, but just tried to draw 2D shapes using glsl with gl_FragCoord rather than with various THREE.Geometry after reading The Book of Shaders and 2D Distance Functions before. After posted this question, I subsequently found some other potentially useful references, but I haven't gone through them: