<!DOCTYPE html>
<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Feel free to distribute and modify code, but keep reference to its creator
*
* Anaglyph3D class creates a stereoscopic 3D effect for images or texts
* by means of encoding each eye's image using filters of different colors .
* It is possible to specify color filters for each eye to use,
* thus adapting image or text for all type of anaglyphic glasses.
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/Javascript/Apply-anaglyph-3D-filter-using-Javascript
**************************************************************/
-->
<html>
<head>
<style>
div
{
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<p>Red Green</p>
<div id='red_green'></div>
<p>Red Blue</p>
<div id='red_blue'></div>
<p>Red Cyan</p>
<div id='red_cyan'></div>
<p>Magenta Green</p>
<div id='magenta_green'></div>
<p>Magenta Cyan</p>
<div id='magenta_cyan'></div>
<script type="text/javascript" src="./anaglyph3d.packed.js" ></script>
<script type="text/javascript">
var imgLeft = "1.jpg";
var imgRight = "2.jpg";
//red green
var rg = new Anaglyph3D({
left: "magenta",
right: "green"
});
rg.image("red_green", imgLeft, imgRight);
//red blue
var rb = new Anaglyph3D({
left: "red",
right: "blue"
}).image("red_blue", imgLeft, imgRight);
//red cyan
var rc = new Anaglyph3D({
left: "red",
right: "cyan"
}).image("red_cyan", imgLeft, imgRight);
//magenta green
var mg = new Anaglyph3D({
left: "magenta",
right: "green"
}).image("magenta_green", imgLeft, imgRight);
//magenta cyan
var mc = new Anaglyph3D({
left: "magenta",
right: "cyan"
}).image("magenta_cyan", imgLeft, imgRight);
</script>
</body>
</html>
|
Download
