js之表單事件中包括change事件，change事件當<input>、<select>、<textarea>的值發生變化時觸發。ThingJS，不斷加入js的基本功能，讓3D開發更輕鬆！

如何結合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: 
'

};

// 建立皮膚

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 = 
"

    
}

    
else 
{

        
dataObj.iframe = 
"

    
}

})

新增iframe元件

1 2	`// 新增 Iframe 元件` `var` `iframe = panel.addIframe(dataObj,` `'iframe'` `).setHeight(` `"400px"` `);`

ThingJS，你的3D開發神器！

ThingJS加入js的基本表單功能