1.3.64 • Published 1 year ago

react-depth-map-component v1.3.64

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year 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.3.50

1 year ago

1.3.53

1 year ago

1.3.54

1 year ago

1.3.51

1 year ago

1.3.52

1 year ago

1.3.57

1 year ago

1.3.58

1 year ago

1.3.55

1 year ago

1.3.56

1 year ago

1.3.59

1 year ago

1.3.60

1 year ago

1.3.61

1 year ago

1.3.64

1 year ago

1.3.62

1 year ago

1.3.63

1 year ago

1.3.47

1 year ago

1.3.45

1 year ago

1.3.48

1 year ago

1.3.49

1 year ago

1.3.44

1 year ago

1.3.42

2 years ago

1.3.43

2 years ago

1.3.41

2 years ago

1.3.17

2 years ago

1.3.18

2 years ago

1.3.16

2 years ago

1.3.19

2 years ago

1.3.20

2 years ago

1.3.21

2 years ago

1.3.24

2 years ago

1.3.25

2 years ago

1.3.22

2 years ago

1.3.23

2 years ago

1.3.28

2 years ago

1.3.29

2 years ago

1.3.26

2 years ago

1.3.27

2 years ago

1.3.31

2 years ago

1.3.32

2 years ago

1.3.30

2 years ago

1.3.35

2 years ago

1.3.36

2 years ago

1.3.33

2 years ago

1.3.34

2 years ago

1.3.39

2 years ago

1.3.37

2 years ago

1.3.38

2 years ago

1.3.40

2 years ago

1.3.7

2 years ago

1.3.5

2 years ago

1.3.10

2 years ago

1.3.13

2 years ago

1.3.12

2 years ago

1.3.15

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.9

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago