基于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.addCastType('Cang', /Cang/);  
THING.factory.registerClass('Cang', Cang);
Cang.current = null;
Cang.open = false;

第四步，初始化Cang类

function init_cangs() {
    var cangs = app.query('.Cang');

    // 双击左键开门
    cangs.on('dblclick', function() {

        // 摄影机飞行
        var pos = this.selfToWorld([0, 2.0, 2.1]);
        var targ = this.position;
        targ[1] += 0.95;
        app.camera.flyTo({
            time: 1000,
            position: pos,
            target: targ, 
        });

        // 机柜开门动画
        if (Cang.current) {
            Cang.current.closeDoor();
            Cang.current = null;
        }
        this.openDoor();

        // 设置为当前
        Cang.current = this;        
        this.style.outlineColor = null; // 当前机柜不沟边
    })

    // 右键关门
    app.on('click', function(event) {
        if (event.button == 2) {
            if (Cang.current) {
                Cang.current.closeDoor();
                Cang.current = null;
            } else {
                // 如果没有当前机柜则飞到一个最佳位置
                app.camera.flyTo({
                    time: 1500,
                    position: [-10.4, 13.6, 12.3],
                    target: [3.6, -4, -1.7], 
                });
            }
        }
    });

    // 机柜 滑过沟边
    cangs.on('mouseon', function () {
        if (this != Cang.current) {
            this.style.outlineColor = '#00ff00';
            this.showUI(true);
        }
    });
    cangs.on('mouseoff', function () {
        this.style.outlineColor = null;
        this.showUI(false);
    });

    
}

第五步，场景加载时初始化机柜，将摄像头角度设置到合理位置

在这里插入代码片app.on('load', function() {
     //摄影机飞行到合适位置
     app.camera.flyTo({
         time: 1000,
         position: [-15.8, 14.3, 17.9],
       target: [0.3, -2.0, 1.5]
    });

    init_cangs();
});

这是搭建好的预览图

下面是我在使用过程中遇到的问题
1、THING.factory.registerClass(‘Cang’, Cang);
这行一定要写，划重点。如果不写就无法获得场景中的机柜

2、柜子的开门动画，先创建Current变量保存当前柜子的状态，每次开柜子的时候对柜子的状态先进行判断，如果是开一个新柜子就要将之前的柜子关闭

这样简单便捷的搭建方式是不是被惊艳到了呢，以下是全部代码感兴趣的小伙伴，copy下去体验吧

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

app.on('load', function() {
    // 摄影机飞行到合适位置
    app.camera.flyTo({
        time: 1000,
        position: [-15.8, 14.3, 17.9],
        target: [0.3, -2.0, 1.5]
    });

    init_cangs();
});

//--------------------------------------------------------------------------------------
//机柜类
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;
    }

} 
THING.Utils.addCastType('Cang', /Cang/);  
THING.factory.registerClass('Cang', Cang);
Cang.current = null;
Cang.open = false;

function init_cangs() {
    var cangs = app.query('.Cang');

    // 双击左键开门
    cangs.on('dblclick', function() {

        // 摄影机飞行
        var pos = this.selfToWorld([0, 2.0, 2.1]);
        var targ = this.position;
        targ[1] += 0.95;
        app.camera.flyTo({
            time: 1000,
            position: pos,
            target: targ, 
        });

        // 机柜开门动画
        if (Cang.current) {
            Cang.current.closeDoor();
            Cang.current = null;
        }
        this.openDoor();

        // 设置为当前
        Cang.current = this;        
        this.style.outlineColor = null; // 当前机柜不沟边
    })

    // 右键关门
    app.on('click', function(event) {
        if (event.button == 2) {
            if (Cang.current) {
                Cang.current.closeDoor();
                Cang.current = null;
            } else {
                // 如果没有当前机柜则飞到一个最佳位置
                app.camera.flyTo({
                    time: 1500,
                    position: [-10.4, 13.6, 12.3],
                    target: [3.6, -4, -1.7], 
                });
            }
        }
    });

    // 机柜 滑过沟边
    cangs.on('mouseon', function () {
        if (this != Cang.current) {
            this.style.outlineColor = '#00ff00';
            this.showUI(true);
        }
    });
    cangs.on('mouseoff', function () {
        this.style.outlineColor = null;
        this.showUI(false);
    });

    
}