Add an atmospheric sky layer to a map

Add a customizable sky layer that simulates the natural scattering of light in the atmosphere. See the example: https://docs.mapbox.com//mapbox-gl-js/example/atmospheric-sky/

by Akihiko Kusanagi

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.1.0/mapbox-gl.css">
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>



<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    #inputs {
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibmFnaXgiLCJhIjoiY2treGZoNzY5MHE1OTJ4bzQ5NmYyY2twNiJ9.ZX7a6VWavDoOMbDoRR7IOg';
var map = new mapboxgl.Map({
  container: 'map',
  zoom: 18,
  center: [127.60597, 35.67283],
  pitch: 30,
  style: 'mapbox://styles/mapbox/streets-v11'
});

// parameters to ensure the model is georeferenced correctly on the map
var modelOrigin = [127.60597, 35.67283];
var modelAltitude = 0;

var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
  modelOrigin,
  modelAltitude
);

// transformation parameters to position, rotate and scale the 3D model onto the map
var modelTransform = {
  translateX: modelAsMercatorCoordinate.x,
  translateY: modelAsMercatorCoordinate.y,
  translateZ: modelAsMercatorCoordinate.z,
  /* Since our 3D model is in real world meters, a scale transform needs to be
   * applied since the CustomLayerInterface expects units in MercatorCoordinates.
   */
  scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};

var THREE = window.THREE;

// configuration of the custom layer for a 3D model per the CustomLayerInterface
var customLayer = {
  id: '3d-model',
  type: 'custom',
  renderingMode: '3d',
  onAdd: function(map, gl) {
    this.camera = new THREE.Camera();
    this.scene = new THREE.Scene();
    var cube = new THREE.Mesh(
    	new THREE.CubeGeometry( 20, 20, 20 ),
      new THREE.MeshNormalMaterial()
    );
    this.scene.add(cube)
    this.map = map;

    // use the Mapbox GL JS map canvas for three.js
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true
    });

    this.renderer.autoClear = false;
  },
  render: function(gl, matrix) {
    var m = new THREE.Matrix4().fromArray(matrix);
    var l = new THREE.Matrix4()
      .makeTranslation(
        modelTransform.translateX,
        modelTransform.translateY,
        modelTransform.translateZ
      )
      .scale(
        new THREE.Vector3(
          modelTransform.scale,
      ...