1.0.9 • Published 4 years ago

react-depth-map v1.0.9

Weekly downloads
9
License
MIT
Repository
-
Last release
4 years ago

React Depth Map Component

React component that implements depth maps, adding a 3D effect to 2D images

This component was adapted and abstracted from an older repo developed by Yuri Artiukh here

The gyroscopic functionality was removed because Apple now requires a user-activated approval. ( too many steps for a good user experience )

Follow the photoshop portion of This Tutorial to help you make the assets needed for this component.

alt text

To Use

npm install react-depth-component
import ImageDepthMap from 'react-depth-map'
    <ImageDepthMap
      originalImg={'./ball.jpg'}
      depthImg={'./ball-map.jpg'}
      verticalThreshold={25}
      horizontalThreshold={15}
    />

Notes

  • The component grows to the size of it's container ( or the natural size of the images )
  • The images are loaded into a canvas, beware of cross-domain issues. Load either relative local paths or from domains that have the proper CORS policy
PropTypeValueDefault
originalImagePath''NA
depthImgPath''NA
verticalThresholdInt1 - 25
horizontalThresholdInt1 - 25
reverseMotionBooleantrue, falsefalse
respondToStringmouseMove, scrollOnX, scrollOnY, scrollOnBothmouseMove
1.0.9

4 years ago

1.0.7-1

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago