扭转本人,以踊跃的心态面对所有,能力在窘境寻找冲破。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开发关上新场面！