首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >webgl和可视化应用是什么关系?不懂来看吧!

webgl和可视化应用是什么关系?不懂来看吧!

原创
作者头像
要不要吃火锅
修改2019-12-12 10:15:47
8290
修改2019-12-12 10:15:47
举报
文章被收录于专栏:3D可视化3D可视化

很简单,我们通过在线开发平台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'

    })

});

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档