Add a 3D model to globe using MapTiler 3D JS

This example shows how to add a 3D model to globe using MapTiler 3D JS module. The 3D JS module enables you to integrate multiple 3D objects onto the globe surface. You can adjust model sizes, create duplicates, position models at specific elevations above sea level, and more. This offers complete flexibility in manipulating your 3D models.


npm install --save @maptiler/sdk @maptiler/3d

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { Layer3D, AltitudeReference } from '@maptiler/3d';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  container: 'map', // container's id or the HTML element to render the map
  style:  MapStyle.SATELLITE,
  center: [-15.45, -21.27], // starting position [lng, lat]
  zoom: 0.75, // starting zoom
  projection: 'globe' //enable globe projection
});

(async () => {
  await map.onReadyAsync();

  const layer3D = new Layer3D("custom-3D-layer");
  map.addLayer(layer3D);

  // Increasing the intensity of the ambient light 
  layer3D.setAmbientLight({intensity: 2});

  // Adding a point light
  layer3D.addPointLight("point-light", {intensity: 30});

  const originalPlaneID = "plane";
  await layer3D.addMeshFromURL(
    originalPlaneID,
    "https://docs-media.maptiler.com/docs/models/plane_a340.glb",
    {
      scale: 1000,
      altitude: 1000000,
      heading: 55,
      altitudeReference: AltitudeReference.MEAN_SEA_LEVEL,
      lngLat: [-2.548828,42.617791]
    }
  );

  const originalDuckID = "duck";
  await layer3D.addMeshFromURL(
    originalDuckID,
    "https://docs-media.maptiler.com/docs/models/duck.glb",
    {
      scale: 1000000,
      heading: 155,
      lngLat: [-43.857422,24.447150]
    }
  );

  layer3D.cloneMesh(originalDuckID, `${originalDuckID}_1`, {lngLat: [-26.298828,28.226970], scale: 400000});

})();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Add a 3D model to globe using MapTiler 3D JS | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapTiler Globe projection</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
   <!-- Importing MapTiler 3D js -->
<script src="https://cdn.maptiler.com/maptiler-3d/v4.0.1/maptiler-3d.umd.min.js"></script>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; background: #000; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
      maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
      const map = new maptilersdk.Map({
        container: 'map', // container's id or the HTML element to render the map
        style:  maptilersdk.MapStyle.SATELLITE,
        center: [-15.45, -21.27], // starting position [lng, lat]
        zoom: 0.75, // starting zoom
        projection: 'globe' //enable globe projection
      });

      (async () => {
        await map.onReadyAsync();

        const layer3D = new maptiler3d.Layer3D("custom-3D-layer");
        map.addLayer(layer3D);

        // Increasing the intensity of the ambient light 
        layer3D.setAmbientLight({intensity: 2});

        // Adding a point light
        layer3D.addPointLight("point-light", {intensity: 30});

        const originalPlaneID = "plane";
        await layer3D.addMeshFromURL(
          originalPlaneID,
          "https://docs-media.maptiler.com/docs/models/plane_a340.glb",
          {
            scale: 1000,
            altitude: 1000000,
            heading: 55,
            altitudeReference: maptiler3d.AltitudeReference.MEAN_SEA_LEVEL,
            lngLat: [-2.548828,42.617791]
          }
        );

        const originalDuckID = "duck";
        await layer3D.addMeshFromURL(
          originalDuckID,
          "https://docs-media.maptiler.com/docs/models/duck.glb",
          {
            scale: 1000000,
            heading: 155,
            lngLat: [-43.857422,24.447150]
          }
        );

        layer3D.cloneMesh(originalDuckID, `${originalDuckID}_1`, {lngLat: [-26.298828,28.226970], scale: 400000});

      })();
  </script>
</body>
</html>