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

三维可视化如果不是专业的开发人员恐怕难以搞定，职场中会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, '自定义摄影机跟随');
    });
});