dhteumeuleu » forgotten world

forgotten world

On March 1, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/gallery-3D.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>forgotten world - interactive DHTML</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position:absolute; 
		left: 0px; 
		top: 0px; 
		width: 100%; 
		height: 100%; 
		background: #222; 
		overflow: hidden; 
	} 
	#screen img { 
		position: absolute; 
		left: -1000px; 
		-ms-interpolation-mode:nearest-neighbor; 
	} 
</style> 
 
<script type="text/javascript"> 
// ================================================== 
//           ===== 3D DHTML gallery ==== 
// script written by Gerard Ferrandez - March 2007 
// http://www.dhteumeuleu.com 
// It's all in the pixels... 
// ================================================== 
 
var r3D = { 
	O : new Array(), 
	xm : 0, 
	ym : 0, 
	FL : 300, // focal length 
	cx : 0, 
	cz : 0, 
	cr : 0, 
 
	run : function () 
	{ 
		/* ==== sky color ==== */ 
		var c = Math.round(Math.max(0, (196 - Math.abs(r3D.cx)) * .5)); 
		r3D.scr.style.backgroundColor = "RGB(".concat(c, ",", c, ",", c, ")"); 
		/* ==== camera position & rotation ==== */ 
		r3D.cx -= Math.round((r3D.xm + r3D.cx) / 10); 
		r3D.cz += Math.round((r3D.ym - r3D.cz) / 10); 
		r3D.cr = -r3D.cx / 200; 
		/* ==== 3D calcul ==== */ 
		for (var i = 0, o; o = r3D.O[i]; i++) o.display(); 
		setTimeout(r3D.run, 16); 
	}, 
 
	addImg : function (x, y, z, i, alpha) 
	{ 
		/* ==== creates Image Element ==== */ 
		var o = document.createElement('img'); 
		var img = document.getElementById("images").getElementsByTagName("img")[i]; 
		o.src = img.src; 
		o.W = img.width; 
		o.H = img.height; 
		o.X = x; 
		o.Y = y; 
		o.Z = z; 
 
		/* ==== transparency ==== */ 
		if (alpha) 
		{ 
			o.style.filter = "alpha(opacity=" + (alpha * 100) + ")"; 
			o.style.opacity = alpha; 
		} 
		r3D.scr.appendChild(o); 
 
		/* ==== main 3D function ==== */ 
		o.display = function () 
		{ 
			var x = this.X - r3D.cx; 
			var y = this.Y; 
			var z = this.Z - r3D.cz; 
			var a = Math.atan2(z, x); 
			var d = Math.sqrt(x * x + z * z); 
			x = Math.cos(a + r3D.cr) * d; 
			z = Math.sin(a + r3D.cr) * d; 
 
			/* ==== element visible ==== */ 
			if (z > -r3D.FL * .9) 
			{ 
				var r = r3D.FL / (r3D.FL + z); 
				var w = this.W * r * r3D.Z; 
				var h = this.H * r * r3D.Z; 
				this.style.left   = Math.floor((r3D.nw * .5) + (x * r) - (w * .5)) + 'px'; 
				this.style.top    = Math.floor((r3D.nh * .5) + (y * r) - (h * .5)) + 'px'; 
				this.style.width  = Math.ceil(w) + 'px'; 
				this.style.height = Math.ceil(h) + 'px'; 
				this.style.zIndex = Math.round(10000 - z); 
			} 
			else this.style.width = '0px'; 
		} 
 
		return o; 
	}, 
 
	init : function () 
	{ 
		r3D.scr = document.getElementById('screen'); 
		resize(); 
		/* ==== creates 3D structure ==== */ 
		for (var i = 0; i < 10; i++) 
		{ 
			/* ==== central lights ==== */ 
			r3D.O.push( 
				r3D.addImg(0, 300, (i * .5) * r3D.nh * .75, 10) 
			); 
 
			var i1 = (i < 5 ? -1 : 1) * r3D.nw * .25; 
			var i2 = (i < 5 ? i : i - 5) * r3D.nh * .75; 
			r3D.O.push( 
				r3D.addImg(i1, 150, i2, 11, .5) 
			); 
			r3D.O.push( 
				r3D.addImg(i1, 0, i2, i) 
			); 
		} 
		/* ==== moon ==== */ 
		r3D.O.push( 
			r3D.addImg(0, -1000, r3D.nh * 5, 12) 
		); 
		/* ==== zyva ==== */ 
		document.getElementById('ground').innerHTML = " "; 
		r3D.run(); 
	}, 
 
	/* ==== screen resize ==== */ 
	resize : function () 
	{ 
		r3D.nx = r3D.scr.offsetLeft; 
		r3D.ny = r3D.scr.offsetTop; 
		r3D.nw = r3D.scr.offsetWidth; 
		r3D.nh = r3D.scr.offsetHeight; 
		r3D.Z  = r3D.nw / 2000; 
	}, 
 
	/* ==== mouse position ==== */ 
	mousemove : function (e) 
	{ 
		if (window.event) e = window.event; 
		r3D.xm = -r3D.nx + e.clientX - r3D.nw * .5; 
		r3D.ym = -r3D.nh + e.clientY * 4.5; 
	} 
} 
 
/* ==== global events ==== */ 
function resize() 
{ 
	r3D.resize(); 
	document.onmousemove = function(e) 
	{ 
		r3D.mousemove(e); 
	} 
} 
onresize = resize; 
 
onload = function () 
{ 
	setTimeout( 
		r3D.init, 1000 
	); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div id="ground" style="position:absolute;top:50%;left:0px;width:100%;height:50%;background:#000;font-size:0.9em;font-family:arial;color:#fff;text-align:center">Loading...</div> 
</div> 
 
<div id="images" style="visibility:hidden"> 
	<!-- left --> 
	<img alt="" src="../images/bl2.jpg"> 
	<img alt="" src="../images/danger.jpg"> 
	<img alt="" src="../images/bl12.jpg"> 
	<img alt="" src="../images/or67.jpg"> 
	<img alt="" src="../images/gr61.jpg"> 
	<!-- right --> 
	<img alt="" src="../images/gr49.jpg"> 
	<img alt="" src="../images/or37.jpg"> 
	<img alt="" src="../images/or70.jpg"> 
	<img alt="" src="../images/gr60.jpg"> 
	<img alt="" src="../images/or71.jpg"> 
	<!-- lamps --> 
	<img alt="" src="../images/Glob44.gif"> 
	<img alt="" src="../images/dg3.jpg"> 
	<img alt="" src="../images/glo4.gif"> 
</div> 
 
</body> 
</html>

Tagged with: 3D • diapo