乐趣区

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

jiezi

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

退出移动版