Stereo Convergence
2D javascript stereoscopic viewer.
Installation
npm
npm install --save stereo-convergence
Usage
Convergence requires a container element with two child elements for each eye, each with some sort of unique identifier.
Basic
...
But this may be an oversimplified example. If you have more than one player, you need to initialize for each element. You may also want to manage configuration in javascript. To do this, pass an options
object:
Advanced
Properties
player
Object: DOM element | Required
Valueless attribute denotes container element to base image positioning from.
left
right
String: CSS selector
left
Default: '[data-stereo-eye="left"]'
right
Default: '[data-stereo-eye="right"]'
Two properties, left
and right
, denote a selector to query via querySelector
within the player. There should only be two eyes.
left: '[data-stereo-eye="left"]'right: '[data-stereo-eye="right"]'
min
Number: Float
Default: -1
Property adjusts the minimum divergence as a percentage of the image width.
max
Number: Float
Default: 1
Property adjusts the maximum divergence as a percentage of the image width.
clip
Boolean
Default: true
Extends the images by the maximum distance the images can shift from center during interaction (ie, the largest absolute value between min
and max
), removing gaps from the edges of the stereo-player during interaction.