三维可视化可以这样玩儿？

三维可视化如果不是专业的开发人员恐怕难以搞定，职场中会3D开发的工程师也是很抢手，作为一个前端工程师如何让自己在可视化行业更有含金量呢？这样玩儿你能收获很多~

ThingJS 基于 HTML5 和 WebGL 技术，只需要具有基本的 Javascript 开发经验即可上手。可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备，为可视化应用提供了简单、丰富的功能。

ThingJS 提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。

跟随物体.js

/**

* 说明：点击按钮 摄像机跟随移动的物体

* 通过每帧更新摄像机的位置实现

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/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, '自定义摄影机跟随');

});

});