基于WebGL架构的3D可视化平台—实现柜子开关门动画，信息牌

ThingJS是基于WebGL架构的物联网3D可视化PasS平台，零门槛、高效率、低成本开发各类3D应用，大大降低了传统3D可视化开发。

现在我们就来实现柜子的开关门动画以及信息牌

第一步，加载场景（场景为预先搭建好的），这里可以用摸摸搭自己搭建场景链接，摸摸搭官网：http://www.thingjs.com/guide/?m=campus

//加载场景代码
var app = new THING.App({
    
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/Test",
    //背景设置
    "skyBox" :"BlueSky"
});

第二步，创建一个Cang类继承THING.Thing。对THING.Thing类进行拓展

class Cang extends THING.Thing {
   
    constructor(app) {
   
        super(app);
        this.isCang = true;
        this.ui = null;
    }

    openDoor() {
   
        this.playAnimation('open1');
    }

     closeDoor() {
   
        this.playAnimation('close1');
    }
    
    createUI() {
   
        if (this.ui)
            return;
        var cabinet = this;

        // 创建widget (动态绑定数据用)
        var panel = THING.widget.Panel({
   
            width: "110px",
            closeIcon: false,
            opacity: 0.8,
        });
        this.panel = panel;
        panel.addString(this, 'name').name('机柜');

        // 创建obj ui (跟随物体用)
        var ui = app.create({
   
            type: 'UI',
            parent: this,
            el: panel.domElement,
            offset: [0, cabinet.size[1], 0]
        });
        this.ui = ui;   
    }

    // 显示界面
    showUI(boolValue) {
   
        if (!this.ui)
            this.createUI();

        this.panel.visible = boolValue;
    }
} 

第三步，添加Cang类别，注册这个类

THING.Utils