Display an animated 3D model

With animation, your 3D models take on a whole new dimension. You can bring them to life and display them on a map. If your 3D model has animations you can play these animations with the 3D JS module of the MapTiler SDK.

This demonstration showcases how to add a animated 3D model in a map.


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 } from '@maptiler/3d';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

const map = new Map({
  container: document.getElementById('map'),
  style: MapStyle.STREETS,
  center: [-3.0615632, 56.4547039], // starting position [lng, lat]
  zoom: 13, // starting zoom
  bearing: 90.1,
  pitch: 60,
  attributionControl: {
    customAttribution: "Model by <a href='https://mirada.com/' target='_blank'>Mirada</a> for <a href='https://experiments.withgoogle.com/3-dreams-of-black' target='_blank'>3 Dreams of Black</a>",
  }
});

// Waiting for the map to be ready
map.on('ready', async () => {
  // Create a Layer3D and add it
  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 });

  // The call can be awaited for the whole download of the mesh to complete
  await layer3D.addMeshFromURL(
    // ID to give to this mesh, unique within this Layer3D instance
    "flamingo",

    // The URL of the mesh
    "https://docs-media.maptiler.com/docs/models/flamingo.glb",

    // A set of options, these can be modified later
    {
      lngLat: [-3.0615632, 56.4547039],
      heading: 150,
      scale: 10,
      animationMode: "continuous",
    }
  );

  const mesh = layer3D.getItem3D("flamingo");

  const animationNames = mesh?.getAnimationNames();

  const animationName = animationNames?.[0];

  if (!animationName) {
    throw new Error(`No animation found with name '${animationName}'`);
  }

  mesh?.playAnimation(
    animationName,
    "loop",
  );
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display an animated 3D model | 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%;}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add an animated 3D model</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%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
  maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  const map = new maptilersdk.Map({
    container: document.getElementById('map'),
    style: maptilersdk.MapStyle.STREETS,
    center: [-3.0615632, 56.4547039], // starting position [lng, lat]
    zoom: 13, // starting zoom
    bearing: 90.1,
    pitch: 60,
    attributionControl: {
      customAttribution: "Model by <a href='https://mirada.com/' target='_blank'>Mirada</a> for <a href='https://experiments.withgoogle.com/3-dreams-of-black' target='_blank'>3 Dreams of Black</a>",
    }
  });

  // Waiting for the map to be ready
  map.on('ready', async () => {
    // Create a Layer3D and add it
    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 });

    // The call can be awaited for the whole download of the mesh to complete
    await layer3D.addMeshFromURL(
      // ID to give to this mesh, unique within this Layer3D instance
      "flamingo",

      // The URL of the mesh
      "https://docs-media.maptiler.com/docs/models/flamingo.glb",

      // A set of options, these can be modified later
      {
        lngLat: [-3.0615632, 56.4547039],
        heading: 150,
        scale: 10,
        animationMode: "continuous",
      }
    );

    const mesh = layer3D.getItem3D("flamingo");

    const animationNames = mesh?.getAnimationNames();

    const animationName = animationNames?.[0];

    if (!animationName) {
      throw new Error(`No animation found with name '${animationName}'`);
    }

    mesh?.playAnimation(
      animationName,
      "loop",
    );
  });
    
</script>
</body>
</html>

Model by Mirada for 3 Dreams of Black ↩