Class Models

3D Models in Mappedin JS

3D models can be used to represent landmarks, assets, or furniture, providing a rich and interactive indoor map experience. Mappedin JS supports models in GLTF and GLB formats. Models with nested meshes are not supported.

Supported Formats

  • GLTF (.gltf)
  • GLB (.glb)
  • Inline base64 models (from the Mappedin 3D Assets Library)

Adding 3D Models

Use the add method to place a model at a specific Coordinate.

Mappedin 3D Assets Library

Mappedin provides a library of ready-to-use 3D models for common indoor objects. You can install it via npm:

npm install @mappedin/3d-assets

Usage (Self-hosted GLB files)

const coordinate = mapView.createCoordinate(45, -75);
mapView.Models.add(coordinate, 'https://your-domain.com/assets/model.glb');

Usage (Direct base64 imports)

import { bed } from '@mappedin/3d-assets/inline';
const coordinate = mapView.createCoordinate(45, -75);
mapView.Models.add(coordinate, bed);

Best Practice: Use self-hosted GLB files for smaller download size and better caching. Use direct imports for convenience and rapid prototyping.

Performance Tips

  • Avoid using models with nested meshes.

More Information

This class is accessed using MapView.Models.

Methods

add all remove removeAll

Methods

add

  • add(coordinate: Coordinate, url: string, options?: TAddModelOptions): Model

    Adds a 3D model to the map at the specified coordinate.

    Parameters

    Returns Model

    A Model instance representing the added 3D model.

    Example: Add a model from a self-hosted GLB file

    const coordinate = mapView.createCoordinate(45, -75);
    mapView.Models.add(coordinate, 'https://your-domain.com/assets/model.glb', {
      scale: [1, 1, 1],
      rotation: [0, 0, 0],
      interactive: true
    });

    Example: Add a model from the Mappedin 3D Assets Library (base64 import)

    import { bed } from '@mappedin/3d-assets/inline';
    const coordinate = mapView.createCoordinate(45, -75);
    mapView.Models.add(coordinate, bed, {
      scale: [0.5, 0.5, 0.5],
      rotation: [0, 90, 0],
      interactive: true
    });

    See

all

  • all(): Model[]

    Automatically adds all 3D models defined in the venue.

    Reads model data from the venue's map data and adds each model to the map at its configured coordinate with the specified rotation, scale, color, and clipping settings.

    Returns Model[]

    An array of Model instances that were added to the map. Returns an empty array when the venue has no model data or none of the model entries are valid.

    Example

    const models = mapView.Models.all();
    console.log(`Added ${models.length} models to the map`);

remove

  • remove(model: Model): void

    Removes a model from the map.

    Parameters

    • model: Model

      The Model instance which should be removed.

    Returns void

    Example

    mapView.Models.remove(model);

removeAll

  • removeAll(): Model[]

    Remove all the models from the map.

    Returns Model[]

    An array of all removed Model instances.

    Example

    const removedModels = mapView.Models.removeAll();

Settings

Member Visibility

On This Page

3D Models in Mappedin JS
Methods