[Открытый исходный код] Gio.js — библиотека визуализации данных Web3D Earth на основе Three.js.

внешний интерфейс JavaScript визуализация данных Открытый исходный код

Здесь я делюсь с вами библиотекой с открытым исходным кодом Gio.js, разработанной с моими друзьями. Gio.js — это библиотека компонентов с открытым исходным кодом для веб-визуализации трехмерных данных Земли, основанная на Three.js. Разработчики веб-приложений, использующие Gio.js, могут быстро и декларативно создавать собственные модели визуализации данных Web3D, добавлять данные и интегрировать их в качестве компонента в свои приложения.

Giojs globe effect preview

Зачем разрабатывать и использовать Gio.js

На разработку этой библиотеки меня вдохновил проект на конференции Google Info 2012.Визуализация мирового трафика оружияВдохновленный сотрудником Google Майклом Чангом. Используя Gio.js, вы можете быстро построить эту классную 3D-модель и использовать ее в качестве основы для углубленной разработки. Gio.js имеет следующие особенности:

  • Простота использования — создание 3D-моделей визуализации данных о Земле всего с помощью 4 строк JavaScript
  • Настройка — используйте богатый API, предоставляемый Gio.js, для создания 3D-глобусов в индивидуальном стиле.
  • Модернизация — создайте современное интерактивное кроссплатформенное адаптивное 3D-интерфейсное приложение на основе Gio.js.

Основное введение

Установите giojs через NPM или YARN

    npm install giojs --save

    yarn add giojs

После добавления зависимостей Threejs и Giojs на HTML-страницу вы можете разработать свое приложение на основе 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. Ваши драгоценные звезды - наша самая большая поддержка и поддержка~

Категории