Color bottom x% of a BoxGeometry using faces

Have you considered to use a custom shader material for the sides of your box? You could use a uniform that controls the coloring according to the texture coordinates. Meaning the bottom vertices have a v value of 0 whereas the top vertices have a v value of 1. If you represent the used space of a warehouse as a value between 0 and 1, you can use it as a threshold in order to switch between colors. The fragment shader looks like so:

varying vec2 vUv;

uniform float threshold;

void main()	{

	float f = step( threshold, vUv.y );
	
	vec3 color1 = vec3( 1.0, 0.0, 0.0 );
	vec3 color2 = vec3( 1.0, 1.0, 1.0 );
	
	vec3 color = mix( color1, color2, f );

	gl_FragColor = vec4( color, 1.0 );

}

Demo: https://jsfiddle.net/5gdcv9ue/

3 Likes