[開源] Gio.js -- 一個基於 Three.js 的 Web3D 地球數據可視化庫

時間 2019-11-17

標籤開源 gio.js gio 一個基於 three.js web3d web 地球數據可視化欄目 JavaScript 简体版

原文原文鏈接

在這裏和你們分享一個和小夥伴們一塊兒開發的開源庫 Gio.js 。Gio.js 是一個基於 Three.js 的 web 3D 地球數據可視化的開源組件庫。使用 Gio.js 的網頁應用開發者，能夠快速地以申明的方式建立自定義的 Web3D 數據可視化模型，添加數據，而且將其做爲一個組件整合到本身的應用中。html

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 安裝 giojsgit

npm install giojs --save
複製代碼

yarn add giojs
複製代碼

在 HTML 頁面中添加了 Threejs 和 Giojs 依賴以後，您就能夠基於 Giojs 開發您的應用了。咱們將展現如何建立一個具備基礎樣式的 Gio 地球。github

<!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 地球：web

<script>

    // 得到用來承載 Gio 地球的容器
    var container = document.getElementById( "globalArea" );

    // 建立 Gio 控制器
    var controller = new GIO.Controller( container );

    // 添加數據
    controller.addData( data );

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

</script>
複製代碼