[開源] Gio.js -- 一個基於 Three.js 的 Web3D 地球資料視覺化庫

syt1234500發表於2018-07-01
JSWeb3D視覺化

在這裡和大家分享一個和小夥伴們一起開發的開源庫 Gio.js 。Gio.js 是一個基於 Three.js 的 web 3D 地球資料視覺化的開源元件庫。使用 Gio.js 的網頁應用開發者，可以快速地以申明的方式建立自定義的 Web3D 資料視覺化模型，新增資料，並且將其作為一個元件整合到自己的應用中。

Giojs globe effect preview

為什麼要開發、使用 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>
複製程式碼

文件

PS. 各位寶貴的 star 是對我們最大的鼓勵與支援哈~

相關文章