pixi-3d-photo

3D photo generator by PixiJS

You need the original image and the depth map.
Also, your browser must support WebGL.
If this plugin does not work, Check your browser's hardware acceleration option.

Image credit: Create 3D Photo from Image JavaScript Tutorial, Red Stapler

Check out WebGL support in your browser!
https://get.webgl.org

For Chrome,
Enable the 'Use hardware acceleration when available' option in chrome://settings.
And check the WebGL item in the 'Graphics Feature Status' list in chrome://gpu.

Installation

$ npm i pixi-3d-photo

How to use

<div id="pikachu"></div>

import { generate3dPhoto } from 'pixi-3d-photo'

generate3dPhoto({
  el: '#pikachu', // Required!
  src: 'pikachu.jpg', // Required!
  map: 'pikachu.map.jpg', // Required!
  scale: 0.7 // Optional, default: 1 
})