Mappedin JS - v6.14.0
    Preparing search index...

    Interface Models

    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.

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

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

    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

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

    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.

    • Avoid using models with nested meshes.

    This class is accessed using MapView.Models.

    interface Models {
        add(
            coordinate: Coordinate,
            url: string,
            options?: TAddModelOptions,
        ): Model;
        remove(model: Model): void;
        removeAll(): Model[];
    }
    Index

    Methods

    add remove removeAll

    Methods

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

      Parameters

      Returns Model

      A Model instance representing the added 3D model.

      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
      });

      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
      });

    • Removes a model from the map.

      Parameters

      • model: Model

        The Model instance which should be removed.

      Returns void

      mapView.Models.remove(model);

    • Remove all the models from the map.

      Returns Model[]

      An array of all removed Model instances.

      const removedModels = mapView.Models.removeAll();

    Settings

    Member Visibility

    On This Page

    3D Models in Mappedin JS
    Methods