专栏首页3D可视化webgl和可视化应用是什么关系?不懂来看吧!
原创

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'

    })

});

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用ThingJS在线开发完成3D地图自定义效果

    好看的3D地图搭建出来,一定是要能为开发者所用与业务系统开发中才能真正地体现价值。基因于此,CityBuilder建立了与ThingJS的通道——直转Thing...

    要不要吃火锅
  • 前端 3d开发怎么操作,什么流程?

    我们都知道现今社会复合型人才是企业刚需,只会一项本领难以在企业中立足,即便是前端工程师,如果你只会敲代码改网页也是不行了,要多方面拓展自己的才能。比如研究可视化...

    要不要吃火锅
  • 数据可视化大屏使用什么技术开发的?

          还记得双十一某宝的数据大屏吗?还记得你剁手了多少吗?他每年都在突破,而企业这历史性的时刻用可视化数据大屏是否更有意义?答案是肯定的!那么数据可视化大...

    要不要吃火锅
  • 没时间社交?莫方,大数据帮你找到真爱!

    生活中,可能你会遇到一些人,在眼神触碰的那一瞬间,你就认定他/她就是你的destiny。十年前,如果你在咖啡厅或者公交站旁边的报刊亭遇到了心仪类型的男神/女神...

    灯塔大数据
  • 慕课网Flask高级编程实战-4.flask核心机制

    在 3.8节我们通过db.create_all(app=app)的方式解决了working outside application context的错误,下面我...

    Meet相识
  • App出海又遇困局,乘风破浪的互联网企业何时上岸

    App Annie统计显示,2020年6月全球热门应用,TikTok(抖音海外版)继续霸榜,无论是下载量还是收入依旧稳拿第一。今年受到新冠疫情的影响,在一二季度...

    APICloud
  • 人工智能会带来一个没有app的世界吗?

    ? 现在很少有人智能手机中装满了app——并且这样的人也变得越来越少。App正在逐渐衰落。根据Comscore的分析师,大部分人(65%)根本不下载app,只...

    新智元
  • 怎样才能做一款好的App,即做app时最需要注意的六个因素

    ? 移动互联网时代,app已经成为了我们生活中不可或缺的一部分了。根据当前情况来看,app在未来几年内,至少两年内,还将会有新一波的火爆增长时期。尤其是我们中...

    非著名程序员
  • 实战演练:PostgreSQL在线扩容

    墨墨导读:最近被问到PG在线扩容的问题,本文整理了整个过程,之前写过一篇文章,供大家参考:《PosgreSQL三种表空间使用方式》https://www.mod...

    数据和云
  • iTunes热门排行榜算法的数据分析

    几天前,我发表了一篇文章——深度分析苹果公司的iTunes免费app热门排行榜的算法、促进、排名操纵和算法故障。 下面是文章概述: ? 2014年10月29号和...

    小莹莹

扫码关注云+社区

领取腾讯云代金券