<div id="map"></div>
<input id='time' type='range' min="25200" max="63000" />
<div id="hour"></div>
body {
  margin: 0;
  padding: 0;
}

html,
body,
#map {
  height: 100%;
}

#time {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 80px;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

#hour {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 30%;
  padding: 5px;
  font-size: 18px;
  line-height: 22px;
  border-radius: 3px;
  text-align: center;
}
mapboxgl.accessToken =
  "pk.eyJ1IjoiYnJhbnpoYW5nIiwiYSI6ImNqM3FycmVldjAxZTUzM2xqMmllNnBjMHkifQ.Wv3ekbtia0BuUHGWVUGoFg";

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v12",
  antialias: true,
  center: [121.495, 31.24],
  zoom: 16.1,
  pitch: 30
});

const tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
  realSunlight: true
});

const hour = document.getElementById("hour");

const date = new Date(Date.UTC(2022, 8, 7, 1, 3));
const timeInput = document.getElementById("time");
timeInput.value =
  date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
hour.innerHTML = "time: " + date.toLocaleString();

timeInput.oninput = () => {
  date.setHours(Math.floor(timeInput.value / 3600));
  date.setMinutes(Math.floor(timeInput.value / 60) % 60);
  date.setSeconds(timeInput.value % 60);

  hour.innerHTML = "time: " + date.toLocaleString();
  map.triggerRepaint();
};

map.on("style.load", () => {
  map.addLayer(
    {
      id: "3d-buildings",
      source: "composite",
      "source-layer": "building",
      filter: ["==", "extrude", "true"],
      type: "fill-extrusion",
      minzoom: 15,
      paint: {
        "fill-extrusion-color": "#ddd",
        "fill-extrusion-height": ["get", "height"],
        "fill-extrusion-base": ["get", "min_height"],
        "fill-extrusion-opacity": 1
      }
    },
    "poi-label"
  );
  tb.setBuildingShadows({
    layerId: "building-shadows",
    buildingsLayerId: "3d-buildings",
    minAltitude: 0.1
  });
});

map.on("load", () => {
  map.tb.setSunlight();
  map.repaint = true;
});

map.on("render", () => {
  tb.setSunlight(date);
});

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css

External JavaScript

  1. https://cdn.jsdelivr.net/gh/BranZhang/[email protected]/dist/threebox.min.js
  2. https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js