@jdultra/ultra-globe

A globe in threejs with support for WMS maps, elevation and OGC 3DTiles!!

Usage no npm install needed!

<script type="module">
  import jdultraUltraGlobe from 'https://cdn.skypack.dev/@jdultra/ultra-globe';
</script>

README

ULTRA Globe

Displays a globe in threeJS with level of detail, imagery and elevation with connection to OGC web services.

Demo : https://ebeaufay.github.io/UltraGlobeDemo/

How to use

In your HTML, have a div with a specific id.

<body>
  <div id="screen" oncontextmenu="return false;" style="position: absolute; height:100%; width:100%; left: 0px; top:0px;"></div>
</body>

in your main javascript file, insert the following:

import { Map } from './Map.js';

let map = new Map({ divID: 'screen' });

At this point, you'll only see a white sphere as no data has yet been loaded.

Loading imagery

We'll first add a WMSLayer that connects to an OGC WMS service in order to display maps at multiple levels of detail

import { Map } from './Map.js';
import { WMSLayer } from './layers/WMSLayer.js';

let map = new Map({ divID: 'screen' });

var wmsLayer = new WMSLayer({
    id: 0,
    name: "WMS",
    bounds: [-180, -90, 180, 90],
    url: "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv",
    layer: "gebco_latest_2",
    epsg: "EPSG:4326",
    version: "1.1.1",
    visible:true
})

//add a layer at index 0
map.setLayer(imageryLayer, 0);

Right now, only WMS and a custom imagery service are supported. You may look at the WMSLayer class to create your own layer.

Loading elevation

Currently, only a custom service for elevation is supported. You can implement your own ElevationLayer. Here we'll use the SimpleElevationLayer class to add some sinusoidal terrain to the map:

import { Map } from './Map.js';
import { WMSLayer } from './layers/WMSLayer.js';

let map = new Map({ divID: 'screen' });

var wmsLayer = new WMSLayer({
    id: 0,
    name: "WMS",
    bounds: [-180, -90, 180, 90],
    url: "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv",
    layer: "gebco_latest_2",
    epsg: "EPSG:4326",
    version: "1.1.1",
    visible:true
})

map.setLayer(imageryLayer, 0);

var simpleElevation = new SimpleElevationLayer({
    id: 1,
    name: "ultraElevation",
    bounds: [-180, -90, 180, 90],
    visible:false
});

map.setLayer(simpleElevation, 1);

Loading OGC 3DTiles

An OGC3DTiles tileset can be added as a layer.

import { Map } from './Map.js';
import { OGC3DTilesLayer } from './layers/OGC3DTilesLayer';

var ogc3dTiles = new OGC3DTilesLayer({
    id: 6,
    name: "OGC 3DTiles",
    visible: true,
    url: "https://storage.googleapis.com/ogc-3d-tiles/ayutthaya/tileset.json",
    zUp: false,
    longitude: 100.5877 * 0.01745329251994329576923690768489,
    latitude: 14.3692 * 0.01745329251994329576923690768489,
    height: 16,
    rotationY: 0.5,
    scale: 1,
    geometricErrorMultiplier: 1.5,
    loadOutsideView:true
});
map.setLayer(ogc3dTiles, 2);

Only B3DM tilesets are supported right now (meshes). Point-cloud will be comming eventually, you can follow the progress of the 3DTiles implementation here: https://github.com/ebeaufay/3DTilesViewer Furthermore, only Box and Sphere bounding volumes are supported (unrefferenced tileset).

NILKINS

This project is being ported to the nilkins engine, a c++ engine with javascript transpilation and superior performance. Write once and compile for web and desktop with this next generation Rendering engine : https://www.nilkinsengine.com/