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 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

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