blender+Three.js 三维数据可视化-数据和最终效果

接上一篇，接下来需要处理那几个罐子的数据，它们分别来自不同的厂商，有各自独立的管理和监控系统，数据通过串口获取，我这边就不能直接拦截，只能从日志下手，通过文件共享打通日志的文件通路，做了一个基于C#的日志读取分析，挂到服务，然后监听服务端口获取数据。

这个数据通过 web socket获取：

var ws = new WebSocket("ws://localhost:8080"); 
	ws.onopen = function(){	　　
	   console.log("open");
	　　//ws.send("success");
	}
	ws.onmessage = function(e){	　　
		var data=e.data;
		switch(data.eType)
		{
			case "F": //冷凝罐																	
				refreshTips(data.h,data.V,data.ps,data.ec,data.MM);
				break;							
			case "NO": //氮气				
				refreshTips(data.h,data.V,data.tp,data.vp,data.m0);
				break;	
			case "NH": //氨气		
				refreshTips(data.h,data.V,data.tp,data.vp,data.m0);
				break;	
			case "YH": //液化气
				refreshTips(data.h,data.V,data.tp,data.vp,data.m0);
				break;										
		}
	}
	ws.onclose = function(e){	　　
	　　console.log("close");
	}
	ws.onerror = function(e){	　　
	　　console.log(e);
	}

tips是一个THREE的Sprite对象，这个对象的说明：

精灵是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。可以看这里官网的定义。

function createTitle(txt)
{
	var canvas = document.createElement("canvas");
	canvas.width =128;
	canvas.height = 64;
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#FFFFFF";
	ctx.font = "25px Arial";
	//ctx.lineWidth = 4;
	ctx.fillText(txt,50,60);
	var texture = new THREE.Texture(canvas);
	texture.needsUpdate = true;
	var material = new THREE.SpriteMaterial({map:texture});
	var text = new THREE.Sprite(material);
	text.scale.set(64,32,0);	
	return text;
}

创建一个用指定画布内容做材质的精灵对象，然后根据各个容器上的小锥形来定位它的位置。类似这样：

var text=createTitle(child.name);
					text.position.set(child.position.x,child.position.y+25,child.position.z);					
					scene.add(text);

完成后大概是这样：