关于javascript:ThingJSchange功能打开3D开发新局面

扭转本人,以踊跃的心态面对所有,能力在窘境寻找冲破。ThingJS新推出change性能，帮忙3D开发关上新场面！
Change有“扭转”的意思，当元素的值产生扭转时，会触发 change 事件。
如何联合2D图形面板和js语法来做3D开发？ThingJS做个好示范，教你着手开发不同物体的温度、雾效和iframe页面。官网新推出change事件的性能，对应各种3D成果元素的值的变动，不便在GUI（图形界面）手动操作，间接生成js代码。
Change事件指代一系列用于扭转场景元素的界面组件，都有哪些组件呢？比方string组件、复选框组件、布尔开关组件、单选框组件、iframe组件，都能够一一退出开发序列。
上面就来一一解析一下。首先要绑定界面组件数据，再创立面板和增加相干组件，留神在创立过程中会通过一些色彩或者动画成果来动静出现变动，包含变色、切换等。

创立面板

// 用于界面组件数据绑定
var dataObj = {
    temperature: '30',
    checkbox: {
        'car01': true,
        'car02': false,
        'car03': false,
    },
    switch1: false,
    radio: '首页',
    iframe: 'https://www.thingjs.com'
};
// 创立面板
var panel = THING.widget.Panel({
    titleText: '面板',
    hasTitle: true,
    width: '300px'
});

增加string组件

官网示例对应温度的变动，通过文本批改来触发change事件。代码中绑定了beforechange,通过return语句终止以后函数并返回以后温度的值，change事件显示以后温度的返回值，面板中须要输出数字，并勾选所作用的物体对象。

// 增加 String 组件
var temperature = panel.addString(dataObj, 'temperature').isChangeValue(true);
// 绑定 beforeChange 事件
temperature.on('beforeChange', function (ev) {
    return confirm('扭转温度设置');
})
// 绑定 change 事件
temperature.on('change', function (ev) {
    console.log('以后温度为：' + ev);
});

增加复选框组件

通过复选框来选择对象，退出色彩变动，直观出现一个升温或者降温的成果。

// 增加 复选框 组件
var checkbox = panel.add(dataObj, 'checkbox');
for (let i = 0; i < 3; i++) {
    checkbox[i].on('beforeChange', function (ev) {
        var car = app.query(/car/)[i];
        if (ev) {
            return confirm('勾销 ' + car.name + ' 红色');
        }
        else {
            return confirm(car.name + ' 变红');
        }
    });
    checkbox[i].on('change', function (ev) {
        var car = app.query(/car/)[i];
        car.style.color = ev ? '#ff0000' : null;
    });
}

增加布尔开关组件

布尔值是“真” True 或“假” False 中的一个，在3D面板中是关上与敞开雾效，设置雾效还要思考到色彩、间隔等因素。

// 增加 布尔开关 组件
var switch1 = panel.addBoolean(dataObj, 'switch1').caption('雾效');
switch1.on('beforeChange', function (ev) {
    if (ev) {
        return confirm('确定敞开雾效吗？');
    }
    else {
        return confirm('确定关上雾效吗？');
    }
})
switch1.on('change', function (ev) {
    if (ev) {
        // 设置雾成果
        app.fog = { color: '#c4c4c4', near: 0, far: 150 };
    }
    else {
        app.fog = null;
    }
})

增加单选框组件

用单选框实现切换，通过增加iframe组件，出现切换后的页面。

// 增加 单选框 组件
var radio = panel.addRadio(dataObj, 'radio', ['首页', '教程']);
radio.on('beforeChange', function (ev) {
    if (ev == '教程') {
        return confirm('iframe 页面将切换到首页');
    }
    else {
        return confirm('iframe 页面将切换到教程');
    }
})
radio.on('change', function (ev) {
    if (ev === '首页') {
        dataObj.iframe = "https://www.thingjs.com"
    }
    else {
        dataObj.iframe = "https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html"
    }
})

增加iframe组件

// 增加 Iframe 组件
var iframe = panel.addIframe(dataObj, 'iframe').setHeight("400px");

扭转本人,以踊跃的心态面对所有,能力在窘境寻找冲破。ThingJS新推出change性能，帮忙3D开发关上新场面！