前端工程師的職位我是覺得真心不錯的，但有的前端工程師野心很大呀，不甘于隻寫頁面代碼，還要往更好的方向發展，比如可視化方向。3D可視化已經被越來越多人、企業了解和應用起來。那你知道對于可視化前端開發有什麼樣的技術要求嗎？其實不難。一切都借助于平台開發，thingjs平台簡化webgl、封裝threejs，隻需要前端有一定的開發經驗，熟練掌握Javascript語言就行啦~簡單拖拽，寫一些代碼就可以實作3D可視化應用開發。
thingjs-面向物聯網的3D可視化開發平台
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse',
skyBox: 'Night'
});
// 初始化完成後開啟場景層級
var campus;
app.on('load', function (ev) {
campus = ev.campus;
// 将層級切換到園區 開啟場景層級
app.level.change(ev.campus);
createWidget();
});
function createWidget() {
// 界面元件
var panel = new THING.widget.Panel();
var customLevelControl = panel.addBoolean({ 'isEnabled': false }, 'isEnabled').caption('自定義層級控制');
customLevelControl.on("change", function (ev) {
app.level.change(campus);
var isEnabled = ev;
if (isEnabled) {
console.log('啟用自定義層級控制');
enableCustomLevelChange();
}
else {
console.log('恢複預設層級控制');
disableCustomLevelChange();
}
});
}
function enableCustomLevelChange() {
// 暫停預設退出園區行為
app.pauseEvent(THING.EventType.LeaveLevel, '.Campus', THING.EventTag.LevelSceneOperations);
// 進入建築攤開樓層
app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
var previous = ev.previous;
console.log('從' + previous.type + '進入建築');
ev.current.expandFloors({
'time': 1000,
'complete': function () {
console.log('ExpandFloor complete ');
}
});
}, 'customEnterBuildingOperations');
// 進入建築保留天空盒
app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelSetBackground);
// 修改進入建築層級選擇設定
app.on(THING.EventType.EnterLevel, '.Building', function (ev) {
var curBuilding = ev.current;
app.picker.pickedResultFunc = function (object) {
var parents = object.parents;
for (var i = 0; i < parents.length; i++) {
var parent = parents[i];
// 如果被Pick物體的父親是目前層級（Building）就傳回被Pick的物體
if (parent == curBuilding) {
return object;
}
if (curBuilding.children.includes(parent)) {
// return parent;
return object;
}
}
}
}, 'customLevelPickedResultFunc');
// 暫停建築層級的預設選擇行為
app.pauseEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);
// 退出建築關閉攤開的樓層
app.on(THING.EventType.LeaveLevel, '.Building', function (ev) {
var current = ev.current;
console.log('退出建築，進入' + current.type);
ev.object.unexpandFloors({
'time': 500,
'complete': function () {
console.log('Unexpand complete ');
}
});
}, 'customLeaveBuildingOperations');
// 進入樓層設定背景
app.on(THING.EventType.EnterLevel, '.Floor', function (ev) {
var previous = ev.previous;
console.log('從' + previous.type + '進入樓層');
if (previous instanceof THING.Building) {
// 從建築進入樓層時
app.background = '/uploads/wechat/emhhbmd4aWFuZw==/file/img/bg_grid.png';
}
}, 'setFloorBackground');
app.pauseEvent(THING.EventType.EnterLevel, '.Floor', THING.EventTag.LevelSetBackground);
// 退出樓層設定背景
app.on(THING.EventType.LeaveLevel, '.Floor', function (ev) {
var current = ev.current;
console.log('退出樓層，進入' + current.type);
if (current instanceof THING.Building) {
// 從樓層退出到建築時
app.background = null;
app.skyBox = "Night";
}
}, 'customLeaveFloorOperations');
// 修改進入層級場景響應
// * @property {Object} ev 進入物體層級的輔助資料
// * @property {THING.BaseObject} ev.object 目前層級
// * @property {THING.BaseObject} ev.current 目前層級
// * @property {THING.BaseObject} ev.previous 上一層級
app.on(THING.EventType.EnterLevel, '.Thing', function (ev) {
var object = ev.object;
// 其他物體漸隐
var things = object.brothers.query('.Thing');
things.fadeOut();
// 嘗試播放動畫
if (object.animationNames.length) {
object.playAnimation({
name: object.animationNames[0],
});
}
}, 'customEnterThingOperations');
// 停止進入物體層級的預設行為
app.pauseEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
app.on(THING.EventType.LeaveLevel, '.Thing', function (ev) {
var object = ev.object;
// 其他物體漸現
var things = object.brothers.query('.Thing');
things.fadeIn();
// 反播動畫
if (object.animationNames.length) {
object.playAnimation({
name: object.animationNames[0],
reverse: true
});
}
}, 'customLeaveThingOperations');
}
function disableCustomLevelChange() {
app.resumeEvent(THING.EventType.LeaveLevel, '.Campus', THING.EventTag.LevelSceneOperations);
app.resumeEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelSetBackground);
app.resumeEvent(THING.EventType.EnterLevel, '.Building', THING.EventTag.LevelPickedResultFunc);
app.resumeEvent(THING.EventType.EnterLevel, '.Floor', THING.EventTag.LevelSetBackground);
app.resumeEvent(THING.EventType.EnterLevel, '.Thing', THING.EventTag.LevelSceneOperations);
app.off(THING.EventType.EnterLevel, '.Building', 'customEnterBuildingOperations');
app.off(THING.EventType.EnterLevel, '.Building', 'customLevelPickedResultFunc');
app.off(THING.EventType.LeaveLevel, '.Building', 'customLeaveBuildingOperations');
app.off(THING.EventType.EnterLevel, '.Floor', 'setFloorBackground');
app.off(THING.EventType.LeaveLevel, '.Floor', 'customLeaveFloorOperations');
app.off(THING.EventType.EnterLevel, '.Thing', 'customEnterThingOperations');
app.off(THING.EventType.LeaveLevel, '.Thing', 'customLeaveThingOperations');
var curLevel = app.level.current;
app.background = 'rgb(144,144,144)';
if (curLevel instanceof THING.Building) {
curLevel.unexpandFloors({
'time': 500,
'complete': function () {
console.log('Unexpand complete ');
}
});
}
}
現在你了解了嗎？3D可視化應用開發對于前端工程師的要求真心不高，隻要你靜下心來研究開發平台，多看看教程就能行，建議大家試一試~
![數智化鞏固智慧變電站“防汛牆”[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)