三维可视化如果不是专业的开发人员恐怕难以搞定，职场中会3D开发的工程师也是很抢手，作为一个前端工程师如何让自己在可视化行业更有含金量呢？这样玩儿你能收获很多~
ThingJS 基于 HTML5 和 WebGL 技术，只需要具有基本的 Javascript 开发经验即可上手。可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备，为可视化应用提供了简单、丰富的功能。
ThingJS 提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
跟随物体.js
/**
* 说明：点击按钮 摄像机跟随移动的物体
* 通过每帧更新摄像机的位置实现
*/
var app = new THING.App({
url: 'https://www.thingjs.com/sta
tic/models/simplebuilding'
});
// 加载场景后执行
app.on('load', function () {
// 通过 name 查询到场景中的车
var car = app.query('car01')[0];
// 世界坐标系下坐标点构成的数组 关于坐标的获取 可利用「工具」——>「拾取场景坐标」
// 拐角处多取一个点，用于转向插值计算时更平滑
var path = [[0, 0, 0], [2, 0, 0], [20, 0, 0], [20, 0, 2], [20, 0, 10], [18, 0, 10], [0, 0, 10], [0, 0, 8], [0, 0, 0]];
car.position = path[0];
car.movePath({
path: path,
orientToPath: true,
loopType: THING.LoopType.Repeat,
time: 10 * 1000
})
new THING.widget.Button('摄像机跟随物体', function () {
// 每一帧设置摄像机位置 和 目标点
car.on('update', function () {
// 摄像机位置为 移动小车后上方
// 为了便于计算 这里用了坐标转换 将相对于小车的位置 转换为 世界坐标
app.camera.position = car.selfToWorld([0, 5, -10]);
// 摄像机目标点为 移动小车的坐标
app.camera.target = car.position
}, '自定义摄影机跟随');
});
new THING.widget.Button('停止', function () {
car.off('update', null, '自定义摄影机跟随');
});
});
举报
