3D Models

Mappedin SDK version 6 is currently in a beta state while Mappedin perfects new features and APIs. Open the v6 release notes to view the latest changes.

Using Mappedin JS 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 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 JS 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.

3D Models can be added to the map using the MapView.Models.add() method. The add method requires a URL to the model and one or more locations to place the model, such as a Coordinate, Door or Space. When adding the same model to multiple locations at the same time always use an array instead of calling the add method multiple times. This allows the SDK to re-use the same instance of the model to reduce RAM usage and rendering time, resulting in better performance.

Optionally, the models interactivity, opacity, rotation and scale can also be set. The following code sample demonstrates the add method.

mapView.Models.add(
	{
		target: event.coordinate,
		rotation: [90, 0, 0],
		interactive: true,
	},
	{
		url: 'https://6ch8w7.csb.app/plant.glb',
	},
);

Try adding some 3D Models to the map below. Clicking on the map will add a snake plant to the map. Clicking the plant removes it.