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.








  

  

  

  
  

  
  
  
  





  

  Model by Mirada for 3 Dreams of Black ↩








  

      
        
          
          Import and play GLTF animations from GLTF files
        
        
Play GLTF animations

        Example
        
Use the MapTiler 3D JS module to play animations in a GLTF model and move the models to simulate a flight over the map.

      
    
   
  

      
        
          
          Add events on 3D models
        
        
3D model events

        Example
        
Use the MapTiler 3D JS module to linsten for mouse events on 3D models.

      
    
   
  

      
        
          
          Animate a 3D plane flight
        
        
Animate a 3D plane flight

        Example
        
Use the MapTiler 3D JS module to simulate and animate a plane flight between two cities.

      
    
   
  

      
        
          
          Add multiple 3D models to the map
        
        
Add multiple 3D models

        Example
        
Use the MapTiler 3D JS module to add multiple 3D models to the map.

      
    
   
  




  
  

  
    An extension of MapLibre GL JS