ThingJS官方示例change事件的5個新組件

change事件觸發時機根據表單元素type與用戶交互決定。ThingJS官方示例change事件的5個新組件，展示輕鬆的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,輕鬆擁有3D開發能力！