@3dsource/data-loader

@3dsource/data-loader

A specialized Angular library for efficient data loading, caching, and management in 3D applications. This library provides utilities for handling various data formats and sources commonly used in 3D visualization projects.

Overview

The data-loader library offers:

• Efficient data loading mechanisms for 3D assets
• Caching strategies to optimize performance
• Support for various data formats (JSON, binary, etc.)
• Integration with Angular's dependency injection system
• Utilities for transforming and processing loaded data
• Progress tracking for large data loads

Installation

Prerequisites

• Angular 19+
• RxJS 7+
• Node.js 20+

Peer Dependencies

This library requires the following peer dependencies:

{
  "@angular/core": "^19.2.0",
  "@angular/common": "^19.2.0",
  "@3dsource/utils": "^1.0.19",
  "rxjs": "^7.8.2"
}

Library Installation

  npm i @3dsource/data-loader

Usage

Module Import

Import the DataLoaderModule in your Angular application:

import { DataLoaderModule } from '@3dsource/data-loader';

@NgModule({
  imports: [
    DataLoaderModule.forRoot({
      // Configuration options
      cacheSize: 50,
      timeout: 30000,
    }),
  ],
})
export class AppModule {}

Basic Data Loading

Use the DataLoaderService to load data:

import { DataLoaderService } from '@3dsource/data-loader';
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div *ngIf="data$ | async as data">
      <!-- Display data -->
    </div>
    <div *ngIf="loading">Loading...</div>
  `,
})
export class MyComponent {
  data$ = this.dataLoader.load('assets/data/model.json');
  loading = true;

  constructor(private dataLoader: DataLoaderService) {
    this.data$.subscribe(() => {
      this.loading = false;
    });
  }
}

Advanced Features

Loading with Progress Tracking

import { DataLoaderService } from '@3dsource/data-loader';

// ...

this.dataLoader.loadWithProgress('assets/large-model.glb').subscribe({
  next: (progress) => {
    if (progress.type === 'progress') {
      this.loadingProgress = progress.percentage;
    } else if (progress.type === 'complete') {
      this.modelData = progress.data;
      this.loadingComplete = true;
    }
  },
  error: (err) => console.error('Loading failed', err),
});

Batch Loading

import { DataLoaderService } from '@3dsource/data-loader';

// ...

const urls = ['assets/textures/texture1.jpg', 'assets/textures/texture2.jpg', 'assets/textures/texture3.jpg'];

this.dataLoader.loadBatch(urls).subscribe({
  next: (results) => {
    this.textures = results;
  },
  error: (err) => console.error('Batch loading failed', err),
});

Features

• Efficient Loading - Optimized loading strategies for different data types
• Caching - Intelligent caching to prevent redundant network requests
• Progress Tracking - Detailed progress information for large file downloads
• Error Handling - Robust error handling with retry capabilities
• Batch Operations - Load multiple resources in parallel
• Transformations - Transform loaded data into application-specific formats
• Cancellation - Cancel ongoing loading operations when needed

Building and Development

Building the Library

  ng build data-loader

Running Tests

  ng test data-loader

Examples

Check the demo application for complete usage examples:

npm run demo:start