ThingJS加入js的基本表单功能
js之表单事件中包括change事件，change事件当<input>、<select>、<textarea>的值发生变化时触发。ThingJS，不断加入js的基本功能，让3D开发更轻松！
如何结合2D图形面板和js语法来做3D开发？ThingJS做个好示范，教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能，对应各种3D效果元素的值的变化，方便在GUI（图形界面）手动操作，直接生成js代码。
Change事件指代一系列用于改变场景元素的界面组件，都有哪些组件呢？比如string组件、复选框组件、布尔开关组件、单选框组件、iframe组件，都可以一一加入开发序列。
下面就来一一解析一下。首先要绑定界面组件数据，再创建面板和添加相关组件，注意在创建过程中会通过一些颜色或者动画效果来动态呈现变化，包括变色、切换等。
创建面板
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
// 用于界面组件数据绑定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事件显示当前温度的返回值，面板中需要输入数字，并勾选所作用的物体对象。
|
1
2
3
4
5
6
7
8
9
10 |
// 添加 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);}); |
添加复选框组件
通过复选框来选择对象，加入颜色变化，直观呈现一个升温或者降温的效果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
// 添加 复选框 组件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面板中是打开与关闭雾效，设置雾效还要考虑到颜色、距离等因素。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
// 添加 布尔开关 组件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组件，呈现切换后的页面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 |
// 添加 单选框 组件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组件
|
1
2 |
// 添加 Iframe 组件var
iframe = panel.addIframe(dataObj,
'iframe'
).setHeight(
"400px"
); |
ThingJS，你的3D开发神器！
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69978212/viewspace-2726463/ ，如需转载，请注明出处，否则将追究法律责任。
