简述webgl和可视化应用的关系

很简单，我们通过在线开发平台thingjs来阐述！　　前提你要掌握js，假设你掌握了js，ThingJS 使用当今最热门的 Javascript语言进行开发。

不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发，搭载丰富插件后，也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。

物联网分为感知层、网络层、应用层。应用层涉及到 3D 界面的开发，对大部分企业来说都有一定挑战。ThingJS 可以极大降低 3D界面开发的成本。

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

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

分享内嵌页面代码

/**

* 说明：WebView页面

* 文档:ThingJS教程——>界面——>3D界面

* 难度：★★☆☆☆

*/

var app = new THING.App({

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

});

// 加载场景后执行

app.on('load', function () {

    // 设置摄像机位置和目标点

    app.camera.position = [20.325589006298948, 25.47555854790737, 23.598673245623264];

    app.camera.target = [2.3860871693835133, -0.2973609127471111, -5.171065071269126];

    var webView01 = app.create({

        type: 'WebView',

        url: 'https://cn.bing.com/',

        position: [10, 13, -5],

        width: 1920 * 0.01, // 3D 中实际宽度 单位 米

        height: 1080 * 0.01, // 3D 中实际高度 单位 米

        domWidth: 1920, // 页面宽度 单位 px

        domHeight: 1080// 页面高度 单位 px

    });

    var webView02 = app.create({

        type: 'WebView',

        url: 'https://www.thingjs.com',

        position: [10, 0.5, 5],

        width: 1920 * 0.01, // 3D 中实际宽度 单位 米

        height: 1080 * 0.01, // 3D 中实际高度 单位 米

        domWidth: 1920, // 页面高度 单位 px

        domHeight: 1080 // 页面高度 单位 px

    });

    webView02.rotateX(-90);

    // 设置页面不可拾取交互

    webView02.pickable = false;

    // 以小车为父物体创建 WebView

    var car01 = app.query('car01')[0];

    var webView03 = app.create({

        type: 'WebView',

        url: 'https://www.thingjs.com/static/pages/page02/index.html?name=' + car01.name,

        parent: car01, // 父物体

        localPosition: [0, 3, -1], // 父物体坐标系下相对坐标位置

        width: 462 * 0.008, // 3D 中实际宽度 单位 米

        height: 296 * 0.008, // 3D 中实际高度 单位 米

        domWidth: 462, // 页面宽度 单位 px

        domHeight: 296 // 页面高度 单位 px

    });

    webView03.rotateX(-30);

    // 设置页面不可拾取交互

    webView03.pickable = false;

    new THING.widget.Button('切换页面', function () {

        webView01.url = 'https://www.thingjs.com/guide/cn/tutorial_Introduce/index.html'

    })

});