Class Image3D

3D images in Mappedin JS

Images can enhance indoor maps by adding custom branding, highlighting important features, or providing additional visual information. They can be placed on any Door, Space, or Coordinate and support various positioning and styling options.

Features

• Support for JPEG and PNG formats
• Automatic caching and reuse of identical URLs
• Customizable size, rotation, and vertical offset
• Option to face the camera automatically
• Memory-efficient rendering

Best Practice: Consider image memory usage carefully. The SDK caches images with the same URL, so reuse images when possible. Large images can impact performance on mobile devices.

Memory Usage Calculation

Formula: width * height * 4 bytes/pixel = memory used

• 512 x 512 Pixel Image: 512px * 512px * 4 bytes/pixel = 1MB
• 4096 x 4096 Pixel Image: 4096px * 4096px * 4 bytes/pixel = 64MB

Example Usage

// Add a simple image
mapView.Image3D.add(coordinate, 'https://example.com/logo.png', { width: 2, height: 1 });

// Add an image with custom positioning
mapView.Image3D.add(space, 'https://example.com/banner.jpg', {
  width: 3,
  height: 1.5,
  rotation: 45,
  verticalOffset: 2
});

// Add an image that faces the camera
mapView.Image3D.add(coordinate, 'https://example.com/icon.png', {
  width: 1,
  height: 1,
  flipImageToFaceCamera: true
});

// Remove an image
mapView.Image3D.remove(image);

// Remove all images
mapView.Image3D.removeAll();
Copy

Advanced

• Use flipImageToFaceCamera: true for billboard-style images that always face the user.
• Use verticalOffset to position images above or below the anchor point.
• Use rotation to orient images in specific directions.

Performance Tips

• Reuse image URLs to take advantage of caching.
• Use appropriately sized images for your use case.
• Consider using smaller images on mobile devices.

More Information

• Images Guide

This class is accessed using MapView.Image3D.