3D 可视化场景中,经常会使用页面信息面板来展示某个对象的详情,我们总结了如下的一种处理模式。分解展示流程如下:
点击对象,显示页面详情信息面板;
对象与详情面板之间创建一条连线;
当 3D 场景变动时,连线要一直与二维面板相连;
示例代码
-- 查询所有兑现并绑定点击事件
app.query('.Thing').on('click', function(){
});
-- 创建详情信息面板。使用了 thing.widget 库,地址: https://www.thingjs.com/static/release/thing.widget.min.js...
function createInfoPanel(){
panel = new THING.widget.Panel({
name: '详情信息',
isClose: true, // 是否有关闭按钮
isDrag: false,
isRetract: true,
opacity: 0.9,
hasTitle: true,
titleImage: 'http://47.93.162.148:8081/liangyw/images/icon/icon.png...'
});
panel.setPosition({left: 30, top: 30});
var dataObj = {
pressure: '0.14MPa',
temperature: '21°C',
checkbox: { '设备 1': false, '设备 2': false, '设备 3': true, '设备 4': true },
radio: '摄像头 01',
open1: true,
height: 10,
maxSize: 1.0,
iframe: true
};
var press = panel.add(dataObj, 'pressure').name('水压').isChangeValue(true);
var water = panel.add(dataObj, 'temperature').name('水温').isChangeValue(true);
var check = panel.add(dataObj, 'checkbox').name({"设备 2": "设备 2(rename)"});
var radio = panel.addRadio(dataObj, 'radio', ['摄像头 01', '摄像头 02']);
var open1 = panel.add(dataObj, 'open1').name('开关 01');
var height = panel.add(dataObj, 'height').name('高度');
var maxSize = panel.add(dataObj, 'maxSize').step(0.25).min(1).max(10);
}
-- 创建面板与对象的连线
function createTail(){
line = app.create({
type: 'Line',
color: 0x3f4850, // 轨迹线颜色
dotSize: 0, // 轨迹点的大小
dotColor: 0xFF0000, // 轨迹点的颜色
points: [[this.position[0], this.position[1]+1,this.position[2]], app.camera.screenToWorld([350, 35])],
});
}
在此注意,因为信息面板用的是屏幕的位置,所以创建连线需要将屏幕位置转换成三维的位置。使用的方法:app.camera.screenToWorld([350, 35])
-- 实时刷新连线的位置,确保与信息面板相连。
// 其实很简单,只要将连线绑定 update 事件即可
line.on('update', function(){
// 将连接的端点位置实时变化
line.setPoint(1, app.camera.screenToWorld([350, 35]));
// 或者用下面方法
line.addPoint(app.camera.screenToWorld([350, 35]));
line.removePoint(1);
});
最后将方法放到点击的事件里。
目前因为性能原因,转动场景时线与面板的连接还是有跳动的现象,还在持续优化中...,可能后续我会采取其他方式来重新规划。