在HTML页面中添加了Threejs和Giojs依赖之后，您就可以基于Giojs开发您的应用了。我们将展示如何创建一个具有基础样式的Gio地球。
1. 创建一个 <div> 标签，您的Gio地球将会被渲染在这个标签中。
<div id="globeArea" style="width: 200px; height: 200px"></div>
2. 在您的页面中添加以下Javascript代码：
<script>
$(function () {
// 获得用来来承载您的IO地球的容器
var container = document.getElementById( "globalArea" );
// 创建Gio控制器
var controller = new GIO.Controller( container );
// 添加数据
controller.addData( data );
// 初始化并渲染地球
controller.init();
});
</script>
$(function () {
// 获得用来来承载您的IO地球的容器
var container = document.getElementById( "globalArea" );
// 创建Gio控制器
var controller = new GIO.Controller( container );
// 添加数据
controller.addData( data );
// 初始化并渲染地球
controller.init();
});
</script>
小贴士：我们在示例代码中使用了JQuery来让代码在页面加载完后执行。
3. 如果一切顺利，在浏览器中打开您的HTML页面你将会看到以下3D地球：点我
4. 试试codepen在线编辑：
See the Pen Giojs Hello World by syt123450 (@syt123450) on CodePen.