Rotate a globe in Hype

#1

Hi

A client asked me if it was possible to create a rotating globe (earth) with Hype.
I have searched the forum and found some interesting posts explaining how to use several images to scroll through. That is a good solution but i wonder if there is any javascript or similar that enables me to use a 3D-model instead? I work as an 3D-illustrator so the 3D-part i can solve.

Any ideas?

Thanks
Rickard

#2

Real 3D is not supported natively but you can use a sprite sheet in Hype with different phases of the turning globe.

Another alternative is a video of a turning global.

If you want a fake flat 3d you can also group the image of a flat map and set the group to a square with a high border radius (making it round) and setting the overflow to hidden. This creates a mask containing the image of the world then you just move the world inside the mask. That has a certain fake but funny look to it.

Then you can always integrate a third party 3d viewer into Hype. One of them was discussed here: https://forums.tumult.com/t/neat-3d-embeds-for-hype-projects/15361?u=maxzieb and another is Adobe Dimension that support Web Export (not sure how good it is, though).

Then you could also use WebGL and there are projects and helper here:
http://examples.webglearth.com/

#3

That is amazing http://examples.webglearth.com/#opposite
I always thought there is landmass on the other side of earth seen from Europe. But we are in the middle of the Pacific Ocean on the opposite side of earth. :wink:

#4

Thanks Max

The sprite sheet is a possibility i looked into since i can render out 36 images of the rotating globe in my 3D software. It looks good but then you can just rotate it not change the angle.
And the client want te globe to start at different countries depending on the subject land then i have to render out new images every time.

The fake flat 3D looks kind of weird so that is not an option. :slight_smile:

I will take a look at the third party viewer but some of them cost quite a lot and this will not be used that much.

WebGl is new to me i take a look!

Thanks a lot
Rickard

#5

If you use something like the webglearth you can provide your own tile set as it splits the texture up into grids to lighten the load depending on the Zoom level. To not go crazy you would limit the zoom levels a user can use when providing a custom “skin”.

Here is an example:
http://examples.webglearth.com/#globe

The portion loading the skin (Tile set) can be found in the code example below… it basically comes down to a directory structure on a server:

WE.tileLayer('http://tileserver.maptiler.com/cassini-terrestrial/{z}/{x}/{y}.jpg' …

{z} is the zoom level (that’s what you want to limit with mapMinZoom and mapMaxZoom)
{x}, {y} are the tiles for each zoom level

There are software helpers that help you render your big world map into the needed directory structure as Open Street map and Google Maps work on a similar principle.

#6

Wow this looks great. I will dive in to it later and see what i can do.
Hopefully there is no limitations putting it on the clients server.
Cheers
Rickard

#7

I assume you would need to look at leaflets ( documentaion )

for a fuller understanding of how the base api works as webglearth is a plugin to that…

#8

Hi Mark
I will take a look at that.
Do you think it’s possible to imbed it all in a Hype document?
Maybe a stupid question but I’m not a coder my self :slight_smile:

Cheers

#9

Sure… it is HTML5. So no problemo. You actually don’t need to digg into the Leaflet API at this point to get started as each examples has the boiler plate code in the example below. For advanced stuff you surely can digg into leaflet. The first step is to find a reference map so you can skin it with your map terrain. The benefit being that the real world coordinates can be used to set pins or navigate the globe.

#10

As @MaxZieb says yes.

But turn protect against external css off.
You may need to get a token from any map service you are using (if not your own tile etc)

Also the documentation for http://www.webglearth.org/ is on the main page.

I agree if you want to just try webglearth and get the example working then use their docs.
For a better understanding and advance use refer to leaflets docs.

#11

Hmm you know it was coming when you said “3d and flat earth” :slight_smile: careful what you say you might offend the flat earthers and according to them its 2d and not 3d :slight_smile:

Image result for flat earth

#12

I wish there were right, much easier for all of us! :slight_smile:

#13

You’re missing the giant turtle that’s carries us through the ether. He is obviously 3D, duh.