1. 安装
在HTML的<head>中引入Three.js和Gio.js依赖,
以下展示了如何使用<script>标签引入依赖:
<script src="three.min.js"></script>
<script src="gio.min.js"></script>
2. 创建
在引入Three.js和Gio.js在页面之后,已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。
创建一个<div>,Gio地球将会被渲染在这个区域中:
<div id="globeArea" style="width: 200px; height: 200px"></div>
添加一下4行Javascript代码在你的HTML中, 用以创建并渲染:
<script>
var container = document.getElementById( "globalArea" );
var controller = new GIO.Controller( container );
controller.addData( data );
controller.init();
</script>
3. 定制
阅读
API文档, 你可以简单快速创建自定义的风格的Gio样式,
右边的区域展示了一种自定义风格的3D Gio地球。