
Show HN: Map33.js – a library to build 3D maps with Three.js - blaze33
https://map33.openbloc.com
======
blaze33
Author here, I also made a small post on the three.js discourse with a little
more background: [https://discourse.threejs.org/t/map33-js-v0-1-a-library-
to-b...](https://discourse.threejs.org/t/map33-js-v0-1-a-library-to-
build-3d-maps/16877?u=maxmre)

By the way you can add missing tiles by double clicking on the grid. Auto-
loading everything as you move can be hard on some computers / phones.

~~~
krat0sprakhar
This looks really cool! I've been thinking of a project where I can view a 3D
map of my ride on Strava .. is that something that's possible with this
library? Can it draw paths across the rendered map?

~~~
blaze33
The scope of this library is just to render the map. But let's say you can
export your strava ride in some json format, I guess it wouldn't be so
complicated to display a path on top of the map using other three.js features
(like Path from quickly looking at the doc
[https://threejs.org/docs/#api/en/extras/core/Path](https://threejs.org/docs/#api/en/extras/core/Path))

------
aclatuts
Anyone wanting a more mature library for 3d maps,
[https://deck.gl/](https://deck.gl/) is pretty good and made by Uber.

~~~
kylebarron
As of a couple months ago, deck.gl was transferred to the Urban Computing
Foundation (part of the Linux Foundation) and is now under open governance.

There's a 3D terrain example in the deck.gl docs that uses Martini to create
the mesh in the browser: [https://deck.gl/examples/terrain-
layer/](https://deck.gl/examples/terrain-layer/)

------
mikewhy
Nice, reminds me of this demo from a few years back:
[https://blog.mapbox.com/bringing-3d-terrain-to-the-
browser-w...](https://blog.mapbox.com/bringing-3d-terrain-to-the-browser-with-
three-js-410068138357)

~~~
blaze33
Indeed, I only found this post quite recently when the demo was mostly done ;)

------
vulkd
Nice work! Had a go at modifying an existing library to display bathymetry
data a little while ago, tried writing about it.
[https://vulkd.com/articles/3d-underwater-
maps/](https://vulkd.com/articles/3d-underwater-maps/) Some hyperlinks there
which could be of interest.

It should be fairly simple to display a linestring from a gpx file or similar
to the map, just write a method to convert x/y/z coords to lng/lat/alt

~~~
somishere
Yet to write about it, but I'm doing similar processing for this map of the
Great Barrier Reef. Currently a shapefile loaded into Mapbox as an extrusion
layer. Looking to optimise / prettify by converting to a mesh:
[https://lab.citizensgbr.org/census-map/](https://lab.citizensgbr.org/census-
map/)

~~~
vulkd
Nice implementation! :) [https://www.eomap.com/portfolio/3d-live-habitats-for-
the-ful...](https://www.eomap.com/portfolio/3d-live-habitats-for-the-full-
extent-of-the-great-barrier-reef/) may be of interest to you

~~~
somishere
That's actually really interesting,thanks for the link. Hadn't heard of eomap,
but I am working closely with both of the partners mentioned. The bathymetry
dateset I'm using is 30m resolution, and comes from another researcher who
heads up much of the bathymetry work on the gbr. Will definitely follow up.
Cheers!

------
gorbypark
Any plans on adding support for displaying GIS data? I would love something
like this I could drop a point, line or polygon onto!

~~~
kejaed
How about Cesium.js?

You can drop files onto the globe.

[https://cesium.com/cesiumjs/cesium-
viewer/](https://cesium.com/cesiumjs/cesium-viewer/)

------
btgeekboy
Opened this on a 3 year old iPhone 8 and it loaded quickly and generated super
smooth 60 FPS renders. Looks great!

~~~
gitgud
Well I'm at 3 FPS on an Intel i7 2.40GHz.... would be nice to control the
level of detail to give older machines higher refrefresh rates

Update: Seems to work much better on Firefox. Tested on Chrome incognito too.

------
detritus
Lovely work!

I can imagine a game based on this where you get dropped somewhere on Earth
and your score is based on how few double clicks to load new tiles it takes
you to recognise where you are.

~~~
mkl
Like GeoGuessr used to be for StreetView. Though that now seems to have
pivoted into some attempt at profit instead of the simple fun it started as.

~~~
freehunter
My understanding is that GeoGuessr was victim to increasing prices for the
Google Maps API. Before 2018 the price for 1,000 calls to Google Maps was
$0.50. Now it's $7 per 1000 calls. And considering how much I move around the
map when I play, I might actually cost them the full $7 for just _one round_
of the game.

It's all simple fun until you get the usage bill at the end.

------
mcint
Nice pretty demo. It's for a software engineering consultancy?

Thanks for the demo, it's pretty cool to see how fast a detailed map can be
rendered outside google maps.

~~~
blaze33
Thanks! TBH it's just me but I'm a software engineer and I have my own
company, so I guess it works ;)

~~~
artifact_44
Have you considered fixing the seams between tiles by generating tiles 2 cells
larger, computing normals, and then discarding the outer ring of tiles, by
trimming the index buffer, or just re-indexing/rewriting the vertices?

~~~
kylebarron
Generating skirts is much more performant and simpler

~~~
blaze33
Seams are actually fixed once the adjacent tiles are loaded but at first there
are skirts on 2 sides of a tile.

------
eg312
Looks cool! Is there a way to export the mesh & the texture?

