[开源] Gio.js -- 一个基于 Three.js 的 Web3D 地球数据可视化库
在这里和大家分享一个和小伙伴们一起开发的开源库 Gio.js 。Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者,可以快速地以申明的方式创建自定义的 Web3D 数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。
- Github 地址: github.com/syt123450/g…
- 中文官网: giojs.org/index_zh.ht…
- Codepen 在线例子: codepen.io/collection/…
为什么要开发、使用 Gio.js
这个库的开发是受到 Google 2012 Info 大会上的项目世界武器贩卖可视化的启发,该项目开发者是 Google 员工 Michael Chang。使用 Gio.js 就可以快速构建这种炫酷的 3D 模型,并以此为基础进行深入地开发。Gio.js 具有以下的特点:
- 易用性 -- 仅使用 4 行 Javascript 即可创建 3D 地球数据可视化模型
- 定制化 -- 使用 Gio.js 提供的丰富的 API 来创建自定义样式的 3D 地球
- 现代化 -- 基于 Gio.js 构建高交互、跨平台、自适应的现代化 3D 前端应用
基本使用介绍
通过 NPM 或者 YARN 安装 giojs
npm install giojs --save yarn add giojs
在 HTML 页面中添加了 Threejs 和 Giojs 依赖之后,您就可以基于 Giojs 开发您的应用了。我们将展示如何创建一个具有基础样式的 Gio 地球。
<!DOCTYPE HTML> <html> <head> <!-- 引入 three.js --> <script src="three.min.js"></script> <!-- 引入 Gio.js --> <script src="gio.min.js"></script> </head> <body> <!-- 创建一个 div 作为 Gio 的绘制容器 --> <div id="globalArea"></div> </body> </html>
在页面中添加以下 Javascript 代码来初始化 Gio 地球:
<script> // 获得用来承载 Gio 地球的容器 var container = document.getElementById( "globalArea" ); // 创建 Gio 控制器 var controller = new GIO.Controller( container ); // 添加数据 controller.addData( data ); // 初始化并渲染地球 controller.init(); </script>
文档
- 中文 README
- 快速了解如何使用 Giojs 开始使用文档
- 有关 Gio.js 的 3D 基础组件介绍文档
- 详细介绍 API 文档
- 参与 Gio.js 项目开发的 开发者文档
PS. 各位宝贵的 star 是对我们最大的鼓励与支持哈~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
HeyUI组件库发布vscode插件,PS教程: 如何开发vscode插件?
前沿 HeyUI组件库,我们项目组已经用了一年多了。 一直没有对应的组件库插件,我一直耿耿于怀。 所以,抽时间查阅了vscode的插件开发教程,终于把vscode的插件完成了。 在此奉上我们的插件库链接,多谢大家提建议。 git: github.com/heyui/heyui…vscode: marketplace.visualstudio.com/items?itemN… 或者大家可以通过在vscode插件库中搜索 heyui-snippets进行安装。 HeyUI 如果对我们组件库不熟悉的小伙伴可以参见我们官网:heyui.top 或者围观我们的github:github.com/heyui/heyui 用例 其他不说,先把效果奉上。 vue单文件结构 首先:我提供了一个vue的输入提示,类似于emmit的!,生成vue单文件的基本结构。 heyui组件库的组件输入提示 heyui组件库有很多组件,如果没有组件的输入提示,基本上,我们都需要手写很多组件的标签,这里我们提供所有的组件库输入提示,以方便程序编写中的效率。 Component 输入提示 Component Affix B...
- 下一篇
What is Babel?
这篇文章是 Babel 6.x 官方文档 的部分内容翻译,结合自己的理解,旨在梳理清楚关于 Babel 是什么、如何运行、什么是插件和预设,以及如何在实际开发中使用等一系列的相关问题。 ECMAScript 版本介绍 阮一峰的《ECMAScript 6 入门》一书中对 JavaScript 版本演进过程进行了详细介绍,以下是对其中部分内容的摘抄,原文在此 ECMAScript 6 简介。 ECMAScript 和 JavaScript 的关系 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? 要讲清楚这个问题,需要回顾历史。1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。 该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果