Here I would like to share with you an open source library gio.js developed with my friends. Gio.js is an open source component library for Web 3D earth data visualization based on Three.js. Web application developers using Gio.js can quickly create custom Web3D data visualization models in a declarative manner, add data, and incorporate it as a component into their applications.

  • Github address: github.com/syt123450/g…
  • Chinese official website: giojs.org/index_zh.ht…
  • Codepen. IO /collection/…

Why develop and use Gio.js

The library was inspired by the Project World Arms Trafficking visualization presented at The Google 2012 Info conference by Google employee Michael Chang. Using Gio.js, you can quickly build cool 3D models and further develop from them. Gio.js has the following features:

  • Ease of use – Create a 3D earth data visualization model with just 4 lines of Javascript
  • Customization – Use the rich apis provided by Gio.js to create custom styled 3D Earths
  • Modernization — Build modern 3D front-end applications with high interaction, cross-platform and self-adaptation based on Gio.js

Basic Usage

Install GioJS using NPM or YARN

    npm install giojs --save
Copy the code
    yarn add giojs
Copy the code

After adding Threejs and Giojs dependencies to your HTML page, you can develop your application based on Giojs. We’ll show you how to create a Gio Earth with a basic style.

<! DOCTYPE HTML> <html> <head> <! -- introducing three. Js - > < script SRC = "three. Min. Js" > < / script > <! -- introduction of Gio. Js - > < script SRC = "Gio. Min. Js" > < / script > < / head > < body > <! <div id="globalArea"></div> </body> </ HTML >Copy the code

Add the following Javascript code to the page to initialize Gio Earth:

<script> // Get the container used to host Gio Earth var container = document.getelementById ("globalArea"); // Create a Gio controller var controller = new gio. controller (container); // addData controller.adddata (data); // Initialize and render earth controller.init(); </script>Copy the code

The document

  • In Chinese the README
  • Quick on how to use Giojs to get started with documents
  • Documentation on the 3D base components of Gio.js
  • Details the API documentation
  • Developer documentation for the gio. js project

PS. Your precious star is the greatest encouragement and support for us