ThingJS-3D 可视化场景中屏幕面板与对象的处理方式

[3D20180920]

3D 可视化场景中，经常会使用页面信息面板来展示某个对象的详情，我们总结了如下的一种处理模式。分解展示流程如下：

1. 点击对象，显示页面详情信息面板；

2. 对象与详情面板之间创建一条连线；

3. 当 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);

});

最后将方法放到点击的事件里。

目前因为性能原因，转动场景时线与面板的连接还是有跳动的现象，还在持续优化中...，可能后续我会采取其他方式来重新规划。