With Threejs and Giojs included in your webpage, you are ready to create your first Gio Globe. We will
start off by creating a globe in basic style.
1. Create a <div> where the globe will be rendered.
<div id="globeArea" style="width: 200px; height: 200px"></div>
2. Add the following code snippet to the body of you html page.
<script>
$(function () {
// Get the container to hold the IO globe
var container = document.getElementById( "globalArea" );
// Create Gio.controller
var controller = new GIO.Controller( container );
// Add data
controller.addData( data );
// Initialize and render the globe
controller.init();
});
</script>
$(function () {
// Get the container to hold the IO globe
var container = document.getElementById( "globalArea" );
// Create Gio.controller
var controller = new GIO.Controller( container );
// Add data
controller.addData( data );
// Initialize and render the globe
controller.init();
});
</script>
Tip: We can also use JQuery or onReady handler to load data.
3. Now you should be able to see the 3D globe on your webpage like this
4. Try it on codepen:
See the Pen Giojs Hello World by syt123450 (@syt123450) on CodePen.