前端工程师的职位我是觉得真心不错的，但有的前端工程师野心很大呀，不甘于只写页面代码，还要往更好的方向发展，比如可视化方向。3D可视化已经被越来越多人、企业了解和应用起来。那你知道对于可视化前端开发有什么样的技术要求吗？其实不难。一切都借助于平台开发，thingjs平台简化webgl、封装threejs，只需要前端有一定的开发经验，熟练掌握Javascript语言就行啦~简单拖拽，写一些代码就可以实现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可视化应用开发对于前端工程师的要求真心不高，只要你静下心来研究开发平台，多看看教程就能行，建议大家试一试~
