@th-batman/3d-viewer-angular

Official Angular component wrapper for @th-batman/3d-viewer-core. Renders photorealistic 3D jewelry and customizer canvases in Angular 18+ applications (including standalone components and legacy NgModule architectures).

Installation

pnpm add @th-batman/3d-viewer-angular @th-batman/3d-viewer-core three
# or with npm
npm install @th-batman/3d-viewer-angular @th-batman/3d-viewer-core three

Peer Dependencies: Requires @angular/core >= 18.0.0 and three >= 0.150.0.

1. Turnkey Customizer (<td-jewelry-customizer>)

import { Component } from '@angular/core'
import { JewelryCustomizerComponent } from '@th-batman/3d-viewer-angular'

@Component({
  selector: 'app-product-page',
  standalone: true,
  imports: [JewelryCustomizerComponent],
  template: `
    <td-jewelry-customizer
      [src]="'https://cdn.example.com/models/solitaire-ring.glb'"
      [(metal)]="activeMetal"
      [(stone)]="activeStone"
      [height]="520"
      [autoRotate]="true"
    ></td-jewelry-customizer>
  `
})
export class ProductPageComponent {
  activeMetal = 'yellow-gold-18k'
  activeStone = 'diamond-d'
}

2. Composable Primitives (<td-viewer> + Swatches)

import { Component } from '@angular/core'
import {
  ViewerComponent,
  MetalSwatchesComponent,
  StoneSwatchesComponent,
  type MetalColorProp,
  type StoneColorProp,
} from '@th-batman/3d-viewer-angular'

@Component({
  selector: 'app-product-detail',
  standalone: true,
  imports: [ViewerComponent, MetalSwatchesComponent, StoneSwatchesComponent],
  template: `
    <div style="max-width: 840px; margin: 0 auto;">
      <td-viewer
        [src]="modelUrl"
        [metalColor]="activeMetal"
        [stoneColor]="activeStone"
        [height]="500"
        [autoRotate]="true"
      ></td-viewer>

      <div style="margin-top: 16px; display: flex; flex-direction: column; gap: 14px;">
        <td-metal-swatches [(value)]="activeMetal" [variant]="'pills'"></td-metal-swatches>
        <td-stone-swatches [(value)]="activeStone" [variant]="'pills'"></td-stone-swatches>
      </div>
    </div>
  `
})
export class ProductDetailComponent {
  modelUrl = 'https://cdn.example.com/models/solitaire-ring.glb'
  activeMetal: MetalColorProp = 'yellow-gold-18k'
  activeStone: StoneColorProp = 'diamond-d'
}

3. NgModule Apps (e.g. Angular ERP)

Import ViewerModule in your feature module to get access to <td-viewer>, <td-metal-swatches>, <td-stone-swatches>, and <td-jewelry-customizer>:

import { NgModule } from '@angular/core'
import { ViewerModule } from '@th-batman/3d-viewer-angular'

@NgModule({
  imports: [ViewerModule],
})
export class ProductModule {}

License

MIT