react-depth-map
React Compontent to implement depth maps
Last updated 4 months ago by blaineo .
MIT · Bugs · Original npm · Tarball · package.json
$ cnpm install react-depth-map 
SYNC missed versions from official npm registry.

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
Prop Type Value Default
originalImage Path '' NA
depthImg Path '' NA
verticalThreshold Int 1 - 25
horizontalThreshold Int 1 - 25
reverseMotion Boolean true, false false
respondTo String mouseMove, scrollOnX, scrollOnY, scrollOnBoth mouseMove

Current Tags

  • 1.0.9                                ...           latest (4 months ago)

10 Versions

  • 1.0.9                                ...           4 months ago
  • 1.0.7                                ...           4 months ago
  • 1.0.7-1                                ...           4 months ago
  • 1.0.6                                ...           6 months ago
  • 1.0.5                                ...           6 months ago
  • 1.0.4                                ...           10 months ago
  • 1.0.3                                ...           10 months ago
  • 1.0.2                                ...           10 months ago
  • 1.0.1                                ...           10 months ago
  • 1.0.0                                ...           10 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (2)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |