@mappedin/3d-assets

A collection of 3D assets optimized for use with @mappedin/mappedin-js.

Installation

npm install @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 all GLB files that you can host 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
mapView.Models.add(
  { target: new Coordinate(45, -75) },
  { url: "https://your-domain.com/assets/model.glb" },
);

Direct Base64 Imports

For convenience, you can import models 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
mapView.Models.add({ target: new Coordinate(45, -75) }, { model: bed });

Tree-shaking Support

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

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