ngx-real3d

Angular 19 wrapper for Real3D FlipBook (jQuery plugin). Provides a standalone component and an optional NgModule for convenience.

Install

npm i ngx-real3d

Set up assets (choose one):

• Host Real3D assets yourself under src/assets/real3d using the plugin package you own.
• Or configure scriptUrls and styleUrls inputs to point to your hosted files/CDN.

Usage

Basic usage in a template

<ngx-real3d
  [options]="{ pdf: '/assets/sample.pdf', pageMode: 'single' }"
></ngx-real3d>

Provide custom asset URLs (if not placed under assets/real3d)

<ngx-real3d
  [scriptUrls]="[
    '/assets/real3d/js/libs/jquery.min.js',
    '/assets/real3d/js/libs/three.js',
    '/assets/real3d/js/libs/pdf.js',
    '/assets/real3d/js/flipbook.js',
    '/assets/real3d/js/flipbook.webgl.js',
    '/assets/real3d/js/flipbook.book3.js',
    '/assets/real3d/js/flipbook.swipe.js',
    '/assets/real3d/js/flipbook.scroll.js'
  ]"
  [styleUrls]="['/assets/real3d/css/flipbook.css']"
  [options]="{ pdf: '/assets/sample.pdf' }"
></ngx-real3d>

Use in a standalone component

import { Component } from '@angular/core';
import { NgxReal3dComponent } from 'ngx-real3d';

@Component({
  selector: 'app-viewer',
  standalone: true,
  imports: [NgxReal3dComponent],
  template: `
    <ngx-real3d [options]="options" style="display:block; width:100%; height:80vh;"></ngx-real3d>
  `,
})
export class ViewerComponent {
  options = { pdf: '/assets/sample.pdf' };
}

Use with NgModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxReal3dModule } from 'ngx-real3d';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxReal3dModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- app.component.html -->
<ngx-real3d [options]="{ pdf: '/assets/sample.pdf' }" style="display:block; width:100%; height:80vh;"></ngx-real3d>

Lazy-load the component via routes (standalone)

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'viewer',
    loadComponent: () =>
      import('ngx-real3d').then((m) => m.NgxReal3dComponent),
  },
];

Sizing

ngx-real3d fills 100% of its host element. Ensure the parent has an explicit width/height (e.g., set a fixed height or use viewport-height units) or inline style as shown above.

Build

ng build ngx-real3d

Artifacts are output to dist/ngx-real3d.

Notes

• This library does not bundle the Real3D assets; you must provide them per the plugin license.
• The component initializes the plugin after scripts/styles load and cleans up on destroy.