ThingJS做项目需要多种设备状态怎么办？戳进来，我教你~

使用ThingJS开发项目时，经常会遇到一个设备会有多种状态，比如：设备在线\离线、告警、鼠标移入移出状态、设备选中的状态等。那么想要更好的管理这些状态，我们就需要一个设备状态管理。而且设备不止这一种，我们的设备有摄像头、门禁、灯杆、消防栓、机柜、烟感等等，都想要使用这一套状态怎么办？

别急，下面我们就来教你怎么解决这个问题

在ThingJS的开发平台上，给我们开放了自定义类的方法，供我们定义自己的类
注意：想要使用自定义类，我们得需要先定义再注册

第一步：定义类

使用ES6的语法定义一个类，我们起个名字，叫Deploy(注意：名字可以自己随便起)
继承 ThingJS 内部类（比如：Thing 类），对 ThingJS 进行扩展和封装

// 继承 Thing 类
class Deploy extends THING.Thing {
    constructor(app) {
        super(app);
    }
    // 添加一个 run 方法
    run() {
        // TODO: 做我们想做的事情
    }
} 

第二步：注册类

通过 THING.factory.registerClass 方法，将继承于 ThingJS 内部类的自定义类，注册到系统中

// 注册自定义类 
THING.factory.registerClass('Deploy ',  Deploy ); 

大家可能会疑惑，里面传进去的两个参数是啥呢？
别急，上图

第三步：使用自定义类

type的值，为我们自定义类的名称

app.create({
      type: 'Deploy',
      id: 'deploy01',
      position: [0, 5, 0],
      url: '/static/Thing/video/gltf',
});

OK，上面我们讲了半天如何自定义类，继承Thing类，接下来，我们将回到第一步，在自定义类时，我们可以自己添加方法，就是我们要做设备状态管理的方法
上图，我们先看一下，添加的方法会绑定在哪里呢

设备状态管理

鼠标划入滑出状态

实现代码

设备状态管理器内的方法
// 设备hover状态
hoverState() {
  // this——当前被查询到的Thing对象
  this.style.color = '#0DA2F7';
  this.style.glow = true;
}

外部使用方法
/**
 * 鼠标操作事件
 */
mouseEvent() {
   // 鼠标移入
   app.on(THING.EventType.MouseEnter, '.Deploy', (ev) => {
      ev.object.hoverState();
   }, 'mouseEnterDeploy');
   // 鼠标移出
   app.on(THING.EventType.MouseLeave, '.Deploy', (ev) => {
      ev.object.normalState();
   }, 'mouseLeaveDeploy');
},

设备选中状态

    // 设备选中状态
    activeState() {
        const pos = this.position;
        // 创建选中状态的模型
        const marker = this.app.create({
            type: 'Thing',
            name: 'activeMarker',
            url: '/static/Thing/selected',
            parent: this,
            position: [pos[0], pos[1] + 0.2, pos[2]],
            scale: [0.03, 0.03, 0.03],
            inheritStyle: false,
            inheritScale: false,
            ignoreParentScale: false,
        });
        this.activeMarker = marker;
        // 使用hover状态效果
        this.hoverState();
        // 顶牌跳动效果
        this.animateTo(marker);
    }
    
    // 效果应用代码
    app.query('.Deploy')[0].activeState();

大家可能会疑惑，上面的模型顶牌是怎么上下跳动的呢

    // 气泡跳动效果
    animateTo(marker) {
        function getMovePath(mark) {
            if (mark) {
                const pos = mark.position;
                const topPos = [pos[0], pos[1] + 0.1, pos[2]];
                return [pos, topPos, pos];
            }
            return [];
        }

        marker.movePath({
            path: getMovePath(marker),
            time: 1000,
            loopType: THING.LoopType.Repeat,
            local: false,
        });
    }

设备告警状态

    // 设备告警状态
    alarmState() {
        this.style.color = '#ff0000';
        this.style.glow = true;
        const pos = this.position;
        // 创建告警顶牌
        const marker = this.app.create({
            type: 'Marker',
            name: 'alarmMarker',
            url: '/static/images/alarm_marker.png',
            parent: this,
            position: [pos[0], pos[1] + 0.3, pos[2]],
            size: 0.2,
            keepSize: false,
            inheritScale: false,
        });
        this.alarmMarker = marker;
        this.animateTo(marker);
    }

    // 效果应用代码
    app.query('.Deploy')[0].alarmState();

设备离线状态

    // 设备离线状态
    offLineState() {
        this.style.color = '#4B4B4B';
    }

    // 效果应用代码
    app.query('.Deploy')[0].offLineState();

设备正常状态（在线状态）

    // 设备正常状态
    normalState() {
        this.style.color = '';
        this.style.glow = false;
        if (this.activeMarker) this.activeMarker.destroy();
        if (this.alarmMarker) this.alarmMarker.destroy();
    }
  
    // 效果应用代码
    app.query('.Deploy')[0].normalState();

如果是摄像头类设备，打开视椎效果（摄像头拍摄范围）

我们可以通过改变fov, far, scale等值，调整视椎效果

    // 打开摄像头视椎
    videoConus() {
        this.app.create({
            type: 'Frustum',
            aspect: 2,
            fov: 20,
            far: 0.05,
            parent: this,
            scale: [0.2, 0.2, 0.2],
            inheritStyle: false,
        });
    }

    // 效果应用代码
    app.query('.Deploy')[0].videoConus();