Stereo Convergence
2D javascript stereoscopic viewer.
Installation
npm
npm install --save stereo-convergenceUsage
Convergence requires a container element with two child elements for each eye, each with some sort of unique identifier.
Basic
<div data-stereo-player data-stereo-min="-0.8" data-stereo-max="1.6" data-stereo-clip="true">
<img data-stereo-eye="left" src="../../image-left" />
<img data-stereo-eye="right" src="../../image-right" />
</div>
...
<link href="../path/to/stereo-convergence/stereo-convergence.min.css" rel="stylesheet">
<script src="../path/to/stereo-convergence/stereo-convergence.min.js"></script>
<script>
// select StereoConvergence containers
var playerEl = document.querySelector('[data-stereo-player]')
// store instance in variable for further manipulation
var stereoPlayer = new StereoConvergence({player: playerEl})
// initialize instance
stereoPlayer.init()
</script>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
<script>
let globalOptions = {
left: '.stereo-convergence__eye--left',
right: '.stereo-convergence__eye--right',
clip: false
}
let playerEls = document.querySelectorAll('.stereo-convergence')
let instances = []
// NodeList → Array & loop through items
[...playerEls].map((el, i) => {
let localOptions = {
// you can hypothetically fetch options dynamically
player: el,
min: data.players[i].min,
max: data.players[i].max
}
// A. use the spread operator (...) to dump the two options objects into one object argument for StereoConvergence
// B. store each instance in an array for further manipulation
instances[i] = new StereoConvergence({...localOptions, ...globalOptions})
instances[i].init()
})
</script>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.
