Transform Viewer Component

A React component for viewing and manipulating images with Three.js, featuring depth-based displacement effects.

Features

• Image overlay with displacement mapping
• Interactive dragging and scaling
• Skew transformation support
• Multiple blend modes
• Screenshot capability

Installation

npm install

Development

To start the development server:

npm run dev

Building

To build the component:

npm run build

Usage

import TransformViewer from 'transform-viewer';

function App() {
  const viewerRef = useRef(null);

  return (
    <TransformViewer
      ref={viewerRef}
      width={959}
      height={825}
      backgroundImage="/path/to/background.jpg"
      backgroundDepthImage="/path/to/depth.jpg"
      foregroundImage="/path/to/foreground.jpg"
    />
  );
}

Props

• backgroundImage: URL of the background image
• backgroundDepthImage: URL of the depth map image
• foregroundImage: URL of the foreground image

Methods

• capture(type?: string, quality?: number): Captures the current view as an image blob

License

MIT