@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

$3

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

$3

This library requires the following peer dependencies:

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

$3

`shell
npm i @3dsource/data-loader
`

Usage

$3

Import the DataLoaderModule in your Angular application:

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

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

$3

Use the DataLoaderService to load data:

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

@Component({
selector: 'app-my-component',
template:


,
})
export class MyComponent {
data$ = this.dataLoader.load('assets/data/model.json');
loading = true;

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

$3

#### Loading with Progress Tracking

`typescript
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

`typescript
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

$3

`shell
ng build data-loader
`

$3

`shell
ng test data-loader
`

Examples

Check the demo application for complete usage examples:

`shell
npm run demo:start
``