js渐变色

1、效果图

2、RGB颜色大概分类：RGB（R:红色，G:绿色，B:蓝色）
红色： 255,0,0
黄色：255,255,0
绿色：0,255,0
青色：0,255,255
蓝色：0,0,255
紫色：255,0,255
调整RGB的三个值即可实现渐变，部分three.js代码省略，渐变色实现的思路仅供参考

//初始化max和min
var max = 100;
var min = 0;
function getMsg(...){
	...
	let color = new THREE.Color(); 
	for(var i = 0; i < n; i++){
		...
	//省略代码：找出z轴最高点和最低点即max和min
		var zB= 0;
		if(Math.abs(max-min)!=0){
			zB = Math.abs(z)/Math.abs(max-min);//点在z轴占总高度的位置范围：0-1
		}
		//将分为五个颜色区域
		if( 0<=zB&&zB<0.1){ 
			//红黄  红色到黄色的渐变 g值 逐渐变大 红色： 255,0,0 --> 黄色：255,255,0  
			var colorH =zB/0.1; // 正常比例为0.2，这样红色过分多所以调整为0.1
			var r = 1;
			var g = colorH; 
			var b = 0;
		}else if(0.1<=zB&&zB<0.4){
			//黄绿  黄色到绿色的渐变 r值 逐渐变小 黄色：255,255,0 --> 绿色：0,255,0
			var colorH = (zB-0.1)/0.3; //红黄占了一份所以黄绿占3份
			var r = 1-colorH;
			var g = 1;
			var b = 0;
		}else if(0.4<=zB&&zB<0.6){
			//绿青  绿色到青色的渐变 b值 逐渐变大 绿色：0,255,0 --> 青色：0,255,255
			var colorH = (zB-2*0.2)/0.2;
			var r = 0;
			var g = 1;
			var b = colorH;
		}else if(0.6<=zB&&zB<0.8){
			//青蓝 青色到蓝色的渐变 g值 逐渐变小 青色：0,255,255 --> 蓝色：0,0,255
			var colorH = (zB-3*0.2)/0.2;
			var r = 0;
			var g = 1-colorH;
			var b = 1;
		}else if(0.8<=zB&&zB<1.0){
			//蓝紫 蓝色到紫色的渐变 r值 逐渐变大 蓝色：0,0,255 --> 紫色：255,0,255
			var colorH = (B-4*0.2)/0.2;
			var r = colorH;
			var g = 0;
			var b = 1;
		}
			color.setRGB(r,g,b); //设置点的颜色
			colors.push( color.r, color.g, color.b );
		}
}