@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
const coordinate = mapView.createCoordinate(45, -75);
mapView.Models.add(coordinate, "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
const coordinate = mapView.createCoordinate(45, -75);
mapView.Models.add(coordinate, 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";

Configuring Models with TAddModelOptions

The optional third argument to Models.add accepts TAddModelOptions, letting you control the model's scale, rotation, interactivity, and more.

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