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

<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.