接上一篇,接下来需要处理那几个罐子的数据,它们分别来自不同的厂商,有各自独立的管理和监控系统,数据通过串口获取,我这边就不能直接拦截,只能从日志下手,通过文件共享打通日志的文件通路,做了一个基于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);
完成后大概是这样: