THING.UE.UMeasure API 文档

简介

THING.UE.UMeasure 是一个用于实现在场景中测量距离和区域面积的组件。

简单示例

创建一个对象池，用来生成在测量时鼠标点击处的气泡

let scale = 0.5;
var pool = new UObjectPool({
    create: function (thing) {
        var style = {
            sideType: THING.SideType.Double,
            transparent: true,
            lights: false,
            image: new THING.ImageTexture("./Content\\Resources\\pivot.png"),
        };
        var marker = new THING.Marker({
            localScale: [scale, scale, scale],
            style: style,
            renderType: THING.RenderType.Sprite,
        });
        marker.node.setCastShadow(false);
        var text = THING.Utils.createObject('Text');
        text.setColor([0, 1, 1, 1]);
        text.setFontSize(100 * scale);
        text.setLayout(1, 2);
        text.keepFaceToCamera(true);
        text.castShadow = false;
        return {
            marker: marker,
            text: text
        };
    },
    pop: function (object) {
        object.marker.visible = true;
        object.marker.pickable = false;
        object.text.visible = true;
    },
    push: function (object) {
        object.marker.visible = false;
        object.text.visible = false;
    }
});

创建测量组件对象

global.measure = THING.Utils.createObject('Measure', {
    offset: 0.5,
    mode: 1
});

或者用以下方式

global.measure = new THING.UE.UMeasure({
    offset: 0.5,
    mode: THING.UE.UMeasureMode.Distance
});

开启测量功能

measure.enable();

关闭测量功能

measure.disable();

注册键盘事件，通过按键切换测量高度、测量区域面积等

• 按下Shift键：开启测量高度
• 抬起Shift键：关闭测量高度
• 按A键：切换到测量距离模式
• 按B键：切换到测量区域模式

app.on('keydown',function(ev){
    //按下Shift键开启测量高度
    if(ev.code === 'LeftShift' || ev.code === 'RightShift'){
        measure.enableMeasureHeight();
    }
    //按下A键，切换到测量距离的模式
    if(ev.code === 'A'){
        measure.setMode(0);
        //或者用下面的方式
        //measure.setMode(THING.UE.UMeasureMode.Distance);
    }
    //按下B键，切换到测量面积的模式
    if(ev.code === 'B'){
        measure.setMode(1);
        //或者用下面的方式
        //measure.setMode(THING.UE.UMeasureMode.Area);
    }
});
//抬起Shift键关闭测量高度
app.on('keyup',function(ev){
    if(ev.code === 'LeftShift' || ev.code === 'RightShift'){
        measure.disableMeasureHeight();
    }
});

绑定测量组件的add事件，可在回调中获取到当前测量点的位置和累计测量距离

在回调中，处理

• 设置气泡的位置
• 气泡上文本显示累计测量距离
• 创建线显示测量轨迹

measure.on('add', function (point, distance) {
    var object = pool.pop();
    object.marker.position = [point[0], point[1], point[2]];
    object.text.setText(`${distance.toFixed(1)} m`);
    object.text.position = [point[0], point[1], point[2]];
    if (!fatline) {
        fatline = new THING.FatLine({
            name: 'guide line',
            radius: 2, // pixels
            cornerRadius: 1
        });
        fatline.node.setCornerRadius(0.0001);
        fatline.node.setCornerSegments(0);
    }
    object.marker.pickable = false;
    fatline.addPoint(point);
});

注册鼠标点击事件

• 右键清空测量区域
• 中键开启/关闭测量功能

app.on('click', function (ev) {//注册鼠标点击事件
    if (ev.button == 2) {//右键清空测量区域
        console.log(`stop measure.`);
        //情况测量结果
        measure.clear();
        pool.pushAll();
        if (fatline) {
            fatline.destroy();
            fatline = null;
        }
        flag = null;
    }
    // 避免误操作出现问题
    if (ev.button == 1) {//中键开启/关闭测量功能 
        if (enabled) {
            measure.clear();
            pool.pushAll();
            if (fatline) {
                fatline.destroy();
                fatline = null;
            }
            flag = null;
            measure.disable();
        }
        else {
            measure.enable();
        }
        enabled = !enabled;
    }
});

鼠标移动时更新气泡位置

app.on('mousemove', function (ev) {//鼠标移动时更新位置
    //通过测量组件获取鼠标点在三维场景中的碰撞检测信息
    var hitInfo = measure.getHitInfo();
    if (!hitInfo.point) {
        if (flag) {
            pool.push(flag);
            flag = null;
        }
        return;
    }
    if (!flag) {
        flag = pool.pop();
    }
    //利用测量组件获取到的碰撞检测信息，实时更新气泡和文本的位置
    flag.marker.position = [hitInfo.point.X, hitInfo.point.Y, hitInfo.point.Z];
    flag.text.setText(`click for pick , current area : ${measure.area().toFixed(2)}平方米`);
    flag.text.position = [hitInfo.point.X, hitInfo.point.Y, hitInfo.point.Z];
});

##效果图

测量距离

测量高度

测量区域