在这里和大家分享一个和小伙伴们一起开发的开源库 Gio.js 。Gio.js 是一个基于 Three.js 的 web 3D 地球数据可视化的开源组件库。使用 Gio.js 的网页应用开发者,可以快速地以申明的方式创建自定义的 Web3D 数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。
这个库的开发是受到 Google 2012 Info 大会上的项目世界武器贩卖可视化的启发,该项目开发者是 Google 员工 Michael Chang。使用 Gio.js 就可以快速构建这种炫酷的 3D 模型,并以此为基础进行深入地开发。Gio.js 具有以下的特点:
通过 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>
// 获得用来来承载您的 IO 地球的容器
var container = document.getElementById( "globalArea" );
// 创建 Gio 控制器
var controller = new GIO.Controller( container );
// 添加数据
controller.addData( data );
// 初始化并渲染地球
controller.init();
</script>
PS. 各位宝贵的 star 是对我们最大的鼓励与支持哈~
1
predator 2018-06-19 09:10:08 +08:00
cool
|
2
jin5354 2018-06-19 10:02:28 +08:00
lz 肉身在外?
|
4
Desiree 2018-06-22 08:19:46 +08:00
so cool
|
5
HunterKingdom 2018-06-30 04:43:29 +08:00
酷炫
|