展开

关键词

Github 项目推荐 | 基于 Three.js 的 web 3D 数据可视化的开源组件库

Gio.js 是一个基于Three.js的web 3D数据可视化的开源组件库。 数据可视化的开源组件库。 易用性 -- 仅使用4行Javascript即可创建3D数据可视化模型定制化 -- 使用Gio.js提供的丰富的API来创建自定义样式的3D现代化 -- 基于Gio.js构建高交互、自适应的现代化 3D前端应用 开始使用安装途径1: 标签在HTML页面的部分引入 Three.js 依赖: 在HTML页面的部分引入 Gio.js 依赖: 或者通过CDN引入依赖: 途径2: JavaScript包管理工具 controller.init(); 如果一切顺利,在浏览器中打开您的HTML页面你将会看到以下3D: 用力点我.

2.2K20

助力全抗疫:3D突发公共卫生事件管理平台

这个图主要展示的是国内各省的疫情数据。而这次,随着第二波疫情的开始,我们再一次推出了一个基于 HTML WebGL 的三维可视世界疫情图。 我们采用了 HT for Web 轻量化模型以及 web 组态,在平台界面创建了2D和3D两大面板。其中标题和数据统计按钮部分以及时间轴为 2D 面板。科幻和两侧的实时播报部分为 3D 场景。 科幻? 实时播报?该平台与众不同之处还在于,科幻与其他三维组件分属两个 3D 场景,也就是说,科幻与实时播报面板两者之间在操作上是不会相互影响的。 ? 比如在竖屏时,我们会只突出显示中间科幻部分:?当手机横屏时,由于有足够的空间,两侧的实时播报部分的3D面板会随着而显现:? 关于更新科幻上的数据,我们进行了一个特别的处理。 2)点击拉近3D 场景相比较 2D 面板,可以进行更丰富和形象的动画展示。点击上某个国家,镜头拉近会到指定国家上方。双击背景,恢复原位。

20651
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Cesium基础使用介绍

    前言最近折腾了一下三维,本文简单为大家介绍一款开源的三维软件——Cesium,以及如何快速上手Cesium。 安装完之后,新建html页面并引用Cesium.js,如下: Hello 3D Earth @import url(CesiumUnminifiedWidgetswidgets.css); html, 就是这么简单,浏览器打开上述html页面,便可看到一个三维。 对象(Entity)通过Cesium可以很清楚的将一个三维模型加载到中。 通过这种方式就可将数据加载到三维中,并设置边线以及填充等,clampToGround用于设置对象是否贴着形,如为true则对象会随势起伏而变化。

    3.9K61

    全网最酷南极路线图

    问题来了,请问要做一个这样三维可交互式的图总共分几步。答案是三步。 3D今天先介绍ECharts的3D。官网有一个实例,感兴趣的同学可以先去看看。具体如何自己搭建?一个html,一个js脚本就够了,操作如下。 首先新建一个html文件,比如叫echarts_map.html,将下面脚本复制进去。 ECharts 上面html中引入的echarts.min.js和echarts-gl.min.js都是ECharts的核心功能。echarts3d.js是我们主要配置可视化方式的主要文件。 把所有文件放在一个文件夹下,用IE浏览器打开html就能看到你自己的了(用Chrome浏览器一直没法成功加载,还没找到原因)。

    24631

    pyEcharts安装及详细使用指南

    国家图: echarts-countries-pypkg (1.9MB): 世界图和 213 个国家,包括中国图中国省级图: echarts-china-provinces-pypkg (730KB ) map0.render(path=世界图.html)中国图from pyecharts import Map province_distribution = {河南: 45.23, 北京: 37.56 =True,visual_text_color=#000) map.render(path=中国图.html)省市图from pyecharts import Map map2 = Map(贵州图 .html)区县图from pyecharts import Map quxian = values3 = map3 = Map(贵阳图, 贵阳, width=1200, height=600) map3.add(贵阳, quxian, values3, visual_range=, maptype=贵阳, is_visualmap=True) map3.render(path=贵阳图.html

    10620

    3d弹弹

    上文和读者聊了聊三维世界中的坐标系问题,本文想通过一个弹弹的案例,再来和读者聊一聊物体移动问题。 绘制接下来,向屏幕中添加一个体使用SphereGeometry来构建,如下:var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var 默认情况下,心在世界坐标的(0,0,0)位置,这样会导致半个在plane下方,因此设置的y轴坐标为4,这样整个就都在plane之上了,绘制结果如下:? 跳动的使跳动起来的方式有很多种,这里通过修改的x轴、y轴坐标来实现这一功能,如下:var step = 0;function show() { step += 0.04; sphere.position.x x轴将介于10到30之间,正弦函数取值虽然也是,但是因为取了绝对值,所以的y轴介于2到12之间,最终跳动效果如下:?

    24830

    python使用pyecharts绘制

    图文件被分成了三个 Python 包,分别为: 全国家图: echarts-countries-pypkg (1.9MB) 中国省级图: echarts-china-provinces-pypkg (关系图) HeatMap(热力图) KlineCandlestick(K线图) Line(折线面积图) Line3D(3D 折线图) Liquid(水图) Map(图) Parallel(平行坐标系 , visual_text_color=#000)map0.render(path=.data04-00世界图.html)? .html)? 全国家图: echarts-countries-pypkg (1.9MB): 世界图和 213 个国家,包括中国图中国省级图: echarts-china-provinces-pypkg (730KB

    2.2K20

    基于WebGL的仓储粮食温度可视化 ThingJS

    网络三维是一种能实时渲染且具有交互性的网络技术,突破了域、平面以及空间的限制,使得人们更便捷处理相应数据。 通过建立一个HTML页面,在HTML当中添加 canvas元素以便于 WebGL进行渲染,然后再在body上添加 onload事件来接收初始化整个 WebGL环境。 ThingJS是近两年新兴的3D类库,提供在线开发智慧建筑、安全消防及仓储的3D可视化组件,比three.js更加节省开发时间,其中3D场景通过CampusBuilder进行搭建后导入ThingJS平台 ThingJS平台注册址基于ThingJS的传感器模拟如图所示,左图为电脑上运行,右侧为手机中运行。某一粮仓当中粮堆内传感器排列如图中体呈8×6×3矩形排列。 每一个体代表粮堆内相应位置的传感器,当传感器提示温度正常时,体呈绿色,温度过高或者过低时,体呈红色;数据显示不正常时呈蓝色利用鼠标拖动整个矩阵,可以从不同角度观察粮堆内整体情况传感拟图。

    25900

    Wikitude发布增强现实SDK 6.0版,专为智能手机、平板电脑和智能眼镜设计

    Wikitude于近日发布了拥有全新3D SLAM引擎的增强现实SDK 6.0版。?Wikitude于近日发布了拥有全新3D SLAM引擎的增强现实SDK 6.0版。 专为智能手机、平板电脑和智能眼镜设计,集成顶级图像识别和追踪模块,改进了基于理位置的AR算法,并搭乘全新即时追踪功能(基于SLAM),是目前全最专业、技术最全面的增强现实开发工具之一。?? )产品应用Wikitude一站式AR解决方案包括图像识别和追踪、3D模型渲染、视频叠加以及基于理AR等核心技术。 Unlimited版· 包括适用于安卓和IOS的SDK版本· 优质支持服务· 免费升级· 无限开发· 跨平台(JavaScript API)· 整个AR视图可自定义· 调用原生代码· 文档和样例· 基于理位置 AR· 触碰抓取· 基本增强内容(图片、文字、按钮)· 视频增强内容· HTML增强内容· 图像识别和追踪· AR模式混用(位置追踪和图像识别)· 3D模型和渲染

    41160

    RevolverMaps-给你的博客加上3D造访者

    是一个非常有创意和新意的网站博客免费统计,采用Revolver Maps Graphics Engine图形引擎,除了提供Java 版本,另一个为Flash 版本,即使你的访问者的浏览器没有安装Flash也可以用Java来观看3D 仪统计。 与普通的统计不一样的是,Revolver Maps 2.0 3D仪统计的左下方会有一个方向按钮,你可以用它来控制仪的旋转和导航等等。 访问者是以一个小点在仪上显示的,并且最近的访问者都会显示其国旗及所在的城市作为标记。 Revolver Maps 2.0的应用版本非常多,包括了RevolverMaps Standard 标准版(此版本使您能够控制缩放和旋转仪)、RevolverMaps Mini 迷你版(即时显示所有访客位置和最近的点击

    75040

    PCL中3D特征描述子Shot详解

    计算3D表面之间的相似程度(表面匹配)是计算机视觉任务尤其是3D对象识别和表面对齐的关键。通过匹配3D描述符建立的局部对应关系可以用于解决更高级别的任务,例如3D对象识别。 这种方法以有效处理诸如遮挡,杂乱和视点变化等问题。? (local Reference Frame)step1: 根据特征点邻域信息建立局部参考坐标系LRF,对特征点的邻域分别沿径向(内外)、经度(时区)和纬度方向(南北半)进行区域划分。 参考文献 http:docs.pointclouds.orgtrunkstructpcl_1_1_s_h_o_t1344.html http:www.vision.deis.unibo.itresearch80 shot https:blog.csdn.netFireMicrocosmarticledetails78059151 https:www.cnblogs.comBellaVitap10019409.html

    3K31

    CSS快乐星

    原文链接 大意是说:父元素的transform-style: preserve-3d;子元素并未继承,当子元素被添加进去时,父元素就会强制闪烁一次,这样4个子元素绕一周,父元素转一圈会闪烁4次。? *{margin: 0; padding: 0;} html,body{ width: 100vw; height: 100vh; } body{ display: -ms-flexbox; display rotateY(720deg) rotateZ(360deg);} } .container { width: 10em; height: 10em; transform-style: preserve-3d infinite linear; } .cube { position: absolute; width: 10em; height: 10em; transform-style: preserve-3d html,body{ height: 100%; } body{ display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content

    16230

    【Cesium】新手入门HelloWord

    1.首先下载Cesium库,址:https:cesium.comcesiumjs2.创建Html 引入 Cesium.js库3.通过下面代码初始化一个基础瓦片初始化一个瓦片viewer = new cesiumContainer, { animation: false, 是否显示动画控件 baseLayerPicker: false, 是否显示图层选择控件 geocoder: true, 是否显示名查找控件 navigationHelpButton: false, 是否显示帮助信息控件 infoBox: false, 隐藏infoBox窗口 selectionIndicator: false, 隐藏选中框 geocoder: false, 名查找 homeButton: false, 首页 fullscreenButton: false, 全屏 sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, 设定3维图的默认场景模式 默认为3D}) 删除默认的影像图层viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); 增加谷歌影像底图viewer.imageryLayers.addImageryProvider

    5220

    Unity3D游戏开发初探—2.初步了解3D模型基础

    已知小在摄像机位置(即是一个摄像头所在的向量,假设其为v2),以及鼠标所指向的位置坐标后(即为目标向量,假设其为v1),通过v1-v2即可得到要发射的具体方向的向量(相当于告诉小朝哪个目标方向发射   有了以上的基本的3D理论基础之后,我们再来做一个Unity3D小案例:围绕太阳转。 所谓围绕太阳转,指的是指绕太阳做周期性转动。(如果你要问为什么围绕太阳转,请问哥白尼先生和牛顿童鞋)?   (3)为了让更像一点,这里我们为增加一个背景图片—贴图。(可以从网上搜索一下,也可以从本文底部给出的URL下载)下载完成之后,将贴图拖动到项目中,最后将贴图拖动到Earth对象上。 最后,点击预览按钮,即可看到围绕太阳转的效果了。 五、小结  本篇主要介绍了游戏开发中的一些3D模型基础,涉及到一点中学的空间几何知识,复习一下对后续学习会有好处。

    36630

    翻译 | 使用A-Frame打造WebVR版《我的世界》

    下面是一个使用 HTML 搭建的完整的 3D 和 VR 场景,它能够在诸如桌面设备和移动设备等任何 VR 平台运行: 在 CodePen 中打开就是这样! 组件注册后,可以附加在 HTML 实体上。ECS 的优势在于它的可组合性;我们可以混合和搭配这些可复用的组件来构建出更复杂的 3D 对象。 让我们将面纹理移动到 中,使用 元素来预加载它: 在 CodePen 中打开添加背景让我们使用 元素为 添加一个 360° 的背景。 是一个在内部粘贴材质的巨大 3D 体。 就像普通图片一样, 可以通过 src 属性接受图片址。最终我们将可以使用一行 HTML 代码实现身临其境的 360° 图片。 我们所使用的图片是一张适用于半体的图片,所以首先我们需要将刚刚的体使用 theta-length=90 水平截成半体,另外我们将的半径设置为 30 米以匹配面。

    69690

    根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

    简单生成一个 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 体模型,再设置“shape3d (创建模型 根据xy平面的曲线,环绕一周形成3D模型。 这个函数主要是将我们的连接线在拖动弹力后被拖拉的连接线的进行一个“变化矩阵”的操作,变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数,能够非常轻松创建出变化矩阵:var 这里我们还是专注继续完成这个例子。 界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:var formPane = new

    41550

    根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

    简单生成一个 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 体模型,再设置“shape3d (创建模型 根据xy平面的曲线,环绕一周形成3D模型。 这个函数主要是将我们的连接线在拖动弹力后被拖拉的连接线的进行一个“变化矩阵”的操作,变化矩阵也是 HT 封装的 ht.Default.createMatrix 函数,能够非常轻松创建出变化矩阵:var http:hightopo.comguideguidepluginforcelayoutexamplesexample_heatmap3d.html这里我们还是专注继续完成这个例子。 界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:var formPane = new

    33830

    基于HTML5实现3D热图Heatmap应用

    http:v.youku.comv_showid_XNzc5ODYxNjY4.html实现Heatmap的开源js库比较出名的就是 heatmapjs ,该框架发展了2年多,作者Patrick Wied 最近决定在保持开源的基础上,提供有偿的商业支持服务,这是好事,上绝大部分开源项目作者搞个barely可用的初级版本后,就多年不见更新了,而真正能实际上线使用的产品哪有不需要持续完善、增强可扩展性以及提供特殊定制服务的 ,其中节点代表热源,其越接近面则面温度越高,这样每个节点的xz面坐标信息作为要传入给heatmapjs的点xy二维坐标信息,三维节点的elevation也就是y轴信息,则作为离面的距离信息,距离越大转成要传入 _renderer.canvas);将热图的canvas注册成HT的图片,而floor的板图元绑定了注册的’hm-bottom’图片,这样就实现了内存绘制canvas,然后通过HT for Web的3D http:v.youku.comv_showid_XNzc5ODYxNjY4.html 1 MAX = 500; 2 WIDTH = 1024; 3 HEIGHT = 512;         4 function

    84120

    基于 HTML5 WebGL 的 3D “弹力”布局

    本例址:http:www.hightopo.comdemopipelineindex.html? 介绍完 HT 封装的弹力布局的背景之后,接下来就是帮助你们也能轻松实现这个效果。 首先我们定义一个颜色数组变量,存储各个弹力的颜色,还定义了一个随机函数,用来生成数随机的数组中的颜色:var colorList = , colorLen = colorList.length;var 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 体模型,再设置“shape3d”属性为前面定义的随机颜色 界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:var formPane = new

    47990

    基于 HTML5 WebGL 的 3D “弹力”布局

    本例址:http:www.hightopo.comdemopipelineindex.html? 介绍完 HT 封装的弹力布局的背景之后,接下来就是帮助你们也能轻松实现这个效果。 首先我们定义一个颜色数组变量,存储各个弹力的颜色,还定义了一个随机函数,用来生成数随机的数组中的颜色:var colorList = , colorLen = colorList.length;var 3D 节点,通过设置这个节点的 style 样式属性来控制节点的显示方式,其中将“shape3d”设置为“sphere”即可将 ht.Node 六面体变成 3D 体模型,再设置“shape3d”属性为前面定义的随机颜色 界面上的图形全部绘制完毕,剩下的就只有 form 表单,首先将 form 表单添加进 HTML 页面,用的是 HT 封装的 ht.widget.FormPane 函数:var formPane = new

    43520

    相关产品

    • 安全运营中心(专有云)

      安全运营中心(专有云)

      腾讯安全运营中心(专有云)是面向政府、金融等大型企事业单位的一款安全管理及运营平台。以安全检测、事件关联及智能分析为核心功能,配合威胁情报、3D可视化,帮助企业打造全网安全态势可知、可见、可控的闭环。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券