3D Models

Mappedin SDK for React Native version 6 is currently in an alpha state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin SDK for React Native with your own map requires a Pro license. Try a demo map for free or refer to the Pricing page for more information.

Adding 3D Models to a Map

Adding 3D models to a map can be a great way to represent landmarks to help users find key locations. They could also be used to show the location of assets or represent furniture to provide a rich indoor layout.

Mappedin SDK for React Native supports models in Graphics Library Transmission Format (GLTF) and GL Transmission Format Binary (GLB) format. Models with nested meshes are not supported and should not be used.

A complete example demonstrating 3D models can be found in the Mappedin React Native Github repo: models.tsx

3D Models can be added to the map using the MapViewControl.Models.add() method. The add method requires a Mappedin.Coordinate to place the model and a URL of the model file. Optionally, the model's interactivity, rotation, scale and more can also be set using the options parameter, which accepts a Mappedin.TAddModelOptions. Models can be updated by calling the MapViewControl.updateState() method.

The following code samples demonstrate adding a 3D model to the map.

Declarative

<Model
  target={coordinate}
  options={{
    scale: 2,
    rotation: [0, 0, 90],
    opacity: 1,
  }}
  url={"https://yourDomain.com/models/yourModel.glb"}
/>

Imperative

mapView.Models.add(coordinate, 'https://yourDomain.com/models/yourModel.glb', {
    interactive: true,
    rotation: [0, 0, 90],
    scale: [10, 10, 10],
});

Mappedin 3D Model Library

The Mappedin 3D Assets Library is a collection of 3D models that can be used to represent landmarks, assets, and furniture on a map. It is optimized for use with Mappedin SDKs. These models are used in the 3D Model Mapper tool, which allows you to place models on a map and customize their appearance.

Installation

The Mappedin 3D Assets Library is available as an npm package available at https://www.npmjs.com/package/@mappedin/3d-assets. It can be installed using the following commands:

NPM:

npm install @mappedin/3d-assets

Yarn:

yarn add @mappedin/3d-assets

Usage

This package provides two ways to use the 3D assets:

1. Self-hosted GLB files (Recommended).
2. Direct base64 model imports.

Self-hosted GLB files (Recommended)

The /binary directory contains GLB files that can be self hosted on your own server. This method is recommended as it provides:

• 30% smaller download size
• No runtime overhead
• Better caching control

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

Direct Base64 Imports

For convenience, models can be imported directly as base64 strings. This method is easier to set up but comes with a larger bundle size.

// Import specific models (supports tree-shaking)
import { bed, chair } from '@mappedin/3d-assets/inline';

// Or import individual models
import plant from '@mappedin/3d-assets/inline/plant_1';

// Usage with MapView
const coordinate = mapView.createCoordinate(45, -75);
mapView.Models.add(coordinate, bed);

This package supports tree-shaking when using direct imports. Only models explicitly imported will be included in the final bundle.

// Only the bed model will be included in the bundle
import { bed } from '@mappedin/3d-assets/inline';

Example

The 3D Model Mapper can be used to place models from the Mappedin 3D Assets Library on a map. Once placed, the model's location details can be exported to a JSON file that can be used when adding models to a map in an app. The Using the 3D Model Export In Other Projects section contains an interactive example that demonstrates using the exported JSON file to add 3D models.

Model List

The Mappedin 3D Assets Library contains the following models. Each model's default blue color can be customized when adding it to the map.

Bathtub	Bed	Bookshelf	Box Cardboard
Can Garbage	Can Recycling	Car	Chair
Computer	Couch	Couch Curved	Couch Outward Curve
Desk	Desk Chair	Dryer	EV Charger
Floor Lamp	Fountain	High Bench	Hot Tub
Kitchen Sink	Kiosk	Plant 1	Plant 2
Privacy Booth	Refrigerator	Round Table	Self Checkout
Shipping Container	Shopping Shelves	Stove	Toilet
Tree Pine	Tree Pine Short	Truck	TV
Vending Machine	Washer	Whiteboard	Wood Stove