技術標籤：前端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 );
		}
}