Gio.js

English | 中文

React版本: react-giojs

微信小游戏: 使用方法介绍

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

为什么要使用Gio.js

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: <script> 标签

在HTML页面的部分引入 Three.js 依赖：

<script src="three.min.js"></script>

在HTML页面的部分引入 Gio.js 依赖：

<script src="gio.min.js"></script>

或者通过CDN引入依赖：

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/giojs@2.2.1/build/gio.min.js"></script>

途径2: JavaScript包管理工具NPM

npm install giojs --save

途径3: JavaScript包管理工具YARN

yarn add giojs

使用

在HTML页面中添加了Threejs和Giojs依赖之后，您就可以基于Giojs开发您的应用了。我们将展示如何创建一个具有基础样式的Gio地球。（在微信小游戏中Gio.js的使用略有不同，查看这个栗子，了解如何在微信小游戏中使用Gio.js）

<!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 );

    /**
    * 添加数据
    * 了解更多有关Gio.js数据格式，查看文档：http://giojs.org/html/docs/dataIntro_zh.html
    * 我们提供了测试数据以供快速上手Gio.js，从该链接中获取测试数据: https://github.com/syt123450/giojs/blob/master/examples/data/sampleData.json
    */
    controller.addData( data );

    // 初始化并渲染地球
    controller.init();

</script>

如果一切顺利，在浏览器中打开您的HTML页面你将会看到以下3D地球：用力点我. 如果有兴趣了解更多Gio.js有趣的用法，我们强烈推荐Gio.js的文档

点击后面这个Codepen logo来在Codepen中试一下这个例子吧 ~

Gio.js 2.0 介绍

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