Using a 3D Globe element

I’d like to know if it’s possible to include a 3D globe to my Hype project… And if the spic nab be controlled by a swipe gesture. Thanks!

Hype is a 2d tool (for now) so you’ll need to find some other way to do this. You’re free to embed other elements within HTML widgets. Here’s one for example:

Did anyone have any success using the WebGL Planet in a hype project?

Here are steps to embed the earth:

1. In Hype, insert an HTML Widget element
2. Click the pen icon next to the new widget
3. Paste code from the webglearth site, like:

    <script src=""></script>
      function initialize() {
        var earth = new'earth_div');
          attribution: '© OpenStreetMap contributors'
      html, body{padding: 0; margin: 0;}
      #earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
    <title>WebGL Earth API: Hello World</title>
  <body onload="initialize()">
    <div id="earth_div"></div>

4. Export/Preview to interact with it.


Interesting how hype has physics, waypoints, and other js libraries built into hype but its missing a behemoth of a js library. three.js :drooling_face: oh the things I could’ve done with if it was part of hype.

why just look at this


I guess for the time being I’ll just fake 3d depth.

1 Like

Hi, You can use any js library within Hype to extend its possibilities even the one that is used to create webGLearth - which seems to be cesium. Actually I did it. You can see it here : (yes, this is a Hype web app) in the upper right corner.
Of course you need to get your hands dirty a bit to learn how each library works and have a minimum skill in javascript (it could worth the pain to learn) The world of 3D is not the easiest one but if you want to play with 3D globes, has a lot of examples to start with and a comprehensive API.