物联网可视化这个事儿越来越多人关注和应用，可视化应用可以用在各行各业中，包括智慧校园、智慧城市、智能建筑、智慧电厂，IT运维，在这里不一一列举，物联网行业的技术人才肯定了解的比小编还多撒。那今天说说物联网可视化效果怎么做能做到最好。制作物联网可视化应用肯定要借助平台和工具的，thingjs就是面向物联网的3D可视化在线开发平台。作为技术工程师的你肯定能玩儿转，因为thingjs平台是基于webgl，使用 Javascript 语言进行开发，门槛极低，但是效果贼好，注意前端工程师都能在thingjs平台在线开发3D可视化应用哈。

thingjs-面向物联网的3D可视化开发平台

第一人称行走.js

/**

* 说明：第一人称行走

* 操作：鼠标按住左键拖拽方向 键盘w a s d 控制行走 空格 跳起

* 教程：ThingJS 教程——>控件——>内置控件

* 难度：★★☆☆☆

*/

var app = new THING.App({

    url: 'https://www.thingjs.com/static/models/storehouse'

});

// 加载场景后执行

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.position = [0, 10, 0];// 起始位置 就是摄像机位置, 不设置就会在摄像机位置直接开始

    ctrl = app.addControl(

        new THING.WalkControl({ // 参数可以动态修改

            walkSpeed: 0.02, // 行走速度

            turnSpeed: 0.25, // 右键旋转速度

            gravity: 29.8, // 物体重量

            eyeHeight: 1.6, // 人高度

            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.removeControl(ctrl);

        ctrl = null;

        gui.destroy();

    }

}