1024 是什么?
游戏?2 的十次方?某论坛节日?
10 月 24 日,其实是程序猿翻身做主,回绝加班的日子——程序员节(又称码农节)。
所以,请关爱身边的濒危物种程序猿吧!
为什么是 10 月 24 日?因为 1024 是 2 的十次方,二进制计数的根本计量单位,是程序员最相熟的数字,就像医生的刀、画家的笔。
江湖上流传着这样一首诗:
床前明月光,我会写代码;千山鸟飞绝,我会写代码;
松下问童子,我会写代码;春眠不觉晓,我会写代码;
白日依山尽,我会写代码;红豆生北国,我会写代码;
锄禾日当午,我会写代码;欲穷千里目,我会写代码!
但现实饱满事实却很骨感,“加班多秃的快”曾经成了程序员的御用段子。
俗话说:“工欲善其事必先利其器”,工具用得好,效率必然高。拿 3D 可视化利用开发来说,3D 可视化利用开发对每个企业来说都是大工程,须要投入大量的人力物力财力能力做好这项工程,但其实能够化繁为简,不须要大费周章,具体来说,ThingJS 3D 可视化开发平台,基于 webgl3D 绘制规范,应用最热门的 Javascript 语言,封装 threejs 库,前端工程师可实现在线开发,可视化场景通过拖拽和简略写一些代码,对接数据源,我的项目部署之后就能够运行在服务器了~ 真是简略好用,工具用的好,上班走得早!
ThingJS 3D 框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于治理和保护,并且提供几百个个官网示例,间接获取 API 能力,不须要基于 3D 概念进行开发,适宜 3D 商业我的项目疾速生成!间隔业务仅一层之隔,是非开发者也容易了解的一种利用办法。采纳原生 JavaScript 的开发语言,配合简捷易用的 3D 搭建工具,让前端程序员和施行人员都能够立刻上手。
仅需几行代码实现第一人称行走
这种 3D 场景中的第一人称行走仅需几十行代码就能轻松实现,代码如下:
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory',
skyBox: 'Night',
env: 'Seaside',
});
// 加载场景后执行
app.on('load', function ()
// 创立按钮
new THING.widget.Button('增加控件', add_control);
new THING.widget.Button('重置', remove_control);
});
/**
* 增加控件
*/
var ctrl = null;
var gui = null;
function add_control() {if (ctrl) {return;}
// 摄像机航行到某地位
app.camera.flyTo({'position': [2.8321649862532032, 1.800003570690751, 19.142406079541555],
'target': [8.238903690935196, 1.4337976272817292, 14.458302731727938],
'time': 1000,
'complete': function () {
ctrl = app.addControl(
new THING.WalkControl({
// 参数能够动静批改
walkSpeed: 0.02, // 行走速度
turnSpeed: 0.25, // 右键旋转速度
gravity: 29.8, // 物体分量
eyeHeight: 1.8, // 人高度
jumpSpeed: 10, // 按空格键 跳跃的速度
enableKeyRotate: false, // 默认不开启键盘管制旋转
useCollision: false, // 默认不开启碰撞检测
useGravity: true // 默认开启重力
})
);
// GUI
gui = new THING.widget.Panel({'titleText': '第一人称行走', 'hasTitle': true});
gui.position = [10, 200];
gui.addBoolean(ctrl, 'enableKeyRotate').caption('键盘管制旋转');
gui.addBoolean(ctrl, 'useCollision').caption('碰撞检测');
gui.addBoolean(ctrl, 'useGravity').caption('重力检测');
gui.addNumberSlider(ctrl, 'gravity').caption('重力').step(1).min(0).max(50).isChangeValue(true);
gui.addNumberSlider(ctrl, 'jumpSpeed').caption('跳起速度').step(1).min(0).max(30).isChangeValue(true);
}
});
}
/**
* 删除控件
*/
function remove_control() {if (ctrl) {
// 摄像机航行到某地位
app.camera.flyTo({'position': [36.013, 42.67799999999998, 61.72399999999999],
'target': [1.646, 7.891, 4.445],
'time': 1000,
'complete': function () {app.removeControl(ctrl);
ctrl = null;
gui.destroy();}
});
}
}
看下成果:
ThingJS 提供的可视化能力能够让物联网利用场景更易于被了解和掌控,大幅晋升客户满意度和解决方案竞争力。简略好用 threejs 库 3D 可视化平台 ThingJS,前端工程师会 js 就能够的,试一下你就晓得如何做啦~