Map33.js v0.1, a library to build 3D maps

Long story short, I took what I liked most about droneWorld (cf. 3D world engine: droneWorld prototype), ie. making 3D terrain and started from scratch to build a library that, hopefully, will be much cleaner in order to build upon and reuse.

Map33.js takes two slippy maps tilesets, one to fetch elevation data tiles, the other to texture the meshes built from said elevation data (currently tried with OSM and Mabox tiles but any XYZ tileserver will do it).

import {Map, MapPicker} from 'map33' // now I see I can't call this export Map, TODO ;)

const position = [45.916216, 6.860973];
const map = new Map(scene, camera, controls, position, 3, 11)
const mapPicker = new MapPicker(camera, map, renderer.domElement)
mapPicker.go(-45, 128)

Live demo (you can double click to add missing tiles)

Chamonix, France:

Mount Fuji, Japan:

Grand Canyon, USA:

I’ll stop here because actually we can check out the whole world :wink:

MeshNormalMaterial with wireframe=true:

Interesting references:

https://blog.mapbox.com/bringing-3d-terrain-to-the-browser-with-three-js-410068138357

13 Likes

good; is it possible to export scene as gltf ?