Question

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>

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.