Using a 3D Globe element

Elements
1

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!

2

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: http://www.webglearth.org/

4

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

5

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:

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script>
      function initialize() {
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
          attribution: '© OpenStreetMap contributors'
        }).addTo(earth);
      }
    </script>
    <style>
      html, body{padding: 0; margin: 0;}
      #earth_div{top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;}
    </style>
    <title>WebGL Earth API: Hello World</title>
  </head>
  <body onload="initialize()">
    <div id="earth_div"></div>
  </body>
</html>

4. Export/Preview to interact with it.

2 Likes
6

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



or
http://armsglobe.chromeexperiments.com

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

1 Like
7

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 : https://livexplorer.com/themannekentrip/ (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, cesium.org has a lot of examples to start with and a comprehensive API.