龙空技术网

4行代码就可以完成一个Web版的3D地球可视化展示——Gio.js

爱分享Coder 2117

前言:

如今你们对“透明js代码”可能比较看重,我们都想要剖析一些“透明js代码”的相关资讯。那么小编也在网络上网罗了一些关于“透明js代码””的相关知识,希望各位老铁们能喜欢,小伙伴们快快来学习一下吧!

介绍

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。

Github

关键字搜索:giojs

相关特性

Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。

这个库的开发是受到Google 2012 Info大会上的某项目可视化的启发,该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型,并以此为基础进行深入地开发。

易用性 -- 仅使用4行Javascript即可创建3D地球数据可视化模型定制化 -- 使用Gio.js提供的丰富的API来创建自定义样式的3D地球现代化 -- 基于Gio.js构建高交互、自适应的现代化3D前端应用快速开始1. 安装

在HTML的<head>中引入Three.js和Gio.js依赖, 以下展示了如何使用<script>标签引入依赖:

<script src="three.min.js"></script><script src="gio.min.js"></script>
2. 创建

在引入Three.js和Gio.js在页面之后,已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。

创建一个<div>,Gio地球将会被渲染在这个区域中:

<div id="globeArea" style="width: 200px; height: 200px"></div>

添加一下4行Javascript代码在你的HTML中, 用以创建并渲染:

<script> // 获得用来来承载您的IO地球的容器 var container = document.getElementById( "globalArea" ); // 创建Gio控制器 var controller = new GIO.Controller( container ); // 添加数据 controller.addData( data ); // 初始化并渲染地球 controller.init();</script>
API文档介绍

在Gio.js 1.0发布之后,开发者们提出了很多很酷的、很有建设性的建议,比如微信应用开发者希望Gio.js支持微信小程序,有经验的Three.js开发者希望Gio.js提供Three.js编程接口等。在经过仔细研究、综合设计之后,Gio.js 2.0实现了大部分功能,并且添加了有关文档说明。以下列出了主要的2.0新增特性:

提供微信小程序支持支持同时加载多数据集(data group)并提供数据集切换提供Three.js编程接口提供Stats.js编程接口支持输出数据到大洲提供输入数据检测新增数据清除新增关闭实时加载透明背景

Gio.js仅依赖于Three.js。

经过测试,Gio.js在Three.js R90版本下可以很好地运行和使用。

Gio.js可以运行在以下的浏览器环境中:

更多详细的介绍就不在本文中介绍了,官方文档非常详细,感兴趣的小伙伴可以直接移步文档:

总结

Gio.js可以说是Three.js中实践的非常不错的了,官方还提供了非常多的实例,通过一些简单的API配置即可实现非常炫酷的Web3D可视化地球,而且文档非常详细,更多实用和有趣的地方等待你的探索!

由于图片和地址未通过审核,本文未展示图片,总之非常炫酷!官方提供了在线DEMO体验!感兴趣的小伙伴不要错过!

标签: #透明js代码 #js透明度代码 #web 可视化 #自适应js #html开源代码