dhteumeuleu » terra incognita

terra incognita

On February 13, 2007, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

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

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>terra incognita - 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%; 
		filter: alpha(opacity=100); 
	} 
	#screen { 
		position:absolute; 
		left: 00%; 
		top: 10%; 
		width: 100%; 
		height: 80%; 
		background: #000; 
		overflow: hidden; 
	} 
	#screen img { 
		position: absolute; 
		left: -1000px; 
		-ms-interpolation-mode:nearest-neighbor; 
		image-rendering: optimizeSpeed; 
	} 
</style> 
 
 
<script type="text/javascript"> 
// ================================================== 
//        ===== 3D innerSphere ==== 
// script written by Gerard Ferrandez - February 2007 
// http://www.dhteumeuleu.com 
// ================================================== 
 
var r3D = { 
	O : new Array(), 
	ry : 0, 
	rx : 0, 
	xm : 100, 
	ym : 50, 
	FL : 200, // focal length 
	R  : 300, // radius 
	Z  : 2.5, // zoom 
 
	run : function () 
	{ 
		r3D.ry += r3D.xm / 3000; 
		r3D.rx += r3D.ym / 3000; 
		var i = 0; 
		while (i < r3D.N) r3D.O[i++].display(); 
		setTimeout(r3D.run, 16); 
	}, 
 
	addImg : function (x, y, z, i) 
	{ 
		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; 
		o.display = function () { 
			var tx = Math.cos(r3D.ry) * this.X - Math.sin(r3D.ry) * this.Z; 
			var tz = Math.sin(r3D.ry) * this.X + Math.cos(r3D.ry) * this.Z; 
			var ty = Math.cos(r3D.rx) * this.Y - Math.sin(r3D.rx) * tz; 
			tz = Math.sin(r3D.rx) * this.Y + Math.cos(r3D.rx) * tz; 
			if (tz > -r3D.R * .5) { 
				var s = r3D.FL / (r3D.FL + tz); 
				var w = this.W * s * r3D.Z; 
				var h = this.H * s * r3D.Z; 
				var x = r3D.nw * .5 + tx * s - w * .5; 
				var y = r3D.nh * .5 + ty * s - h * .5; 
				this.style.left   = Math.round(x) + 'px'; 
				this.style.top    = Math.round(y) + 'px'; 
				this.style.width  = Math.round(w) + 'px'; 
				this.style.height = Math.round(h) + 'px'; 
			} else this.style.width   = '0px'; 
		} 
		document.getElementById('screen').appendChild(o); 
		return o; 
	}, 
 
	init : function () 
	{ 
		resize(); 
		var K = 6; 
		r3D.O.push(r3D.addImg(0, 0, r3D.R, 0)); 
		for(var i = 1; i <= K - 1; i++) 
		{ 
			var M = Math.round(2 * K * Math.sin(Math.PI * (i / K))); 
			for(var j = 0; j <= M - 1; j++) 
			{ 
				r3D.O.push(r3D.addImg( 
					r3D.R * Math.sin(Math.PI * (i / K)) * Math.cos(2 * Math.PI * (j / M)), 
					r3D.R * Math.sin(Math.PI * (i / K)) * Math.sin(2 * Math.PI * (j / M)), 
					r3D.R * Math.cos(Math.PI * (i / K)), i) 
				); 
			} 
		} 
		r3D.O.push(r3D.addImg(0, 0, -r3D.R, i)); 
		r3D.N = r3D.O.length; 
		r3D.run(); 
	}, 
 
	resize : function () 
	{ 
		var scr = document.getElementById('screen'); 
		r3D.nx = scr.offsetLeft; 
		r3D.ny = scr.offsetTop; 
		r3D.nw = scr.offsetWidth; 
		r3D.nh = scr.offsetHeight; 
	}, 
 
	mousemove : function (e) 
	{ 
		if (window.event) e = window.event; 
		r3D.xm = e.clientX - r3D.nx - r3D.nw * .5; 
		r3D.ym = e.clientY - r3D.ny - r3D.nh * .5; 
	} 
} 
 
function resize() 
{ 
	r3D.resize(); 
	document.onmousemove = function(e) { r3D.mousemove(e); } 
} 
onresize = resize; 
onload = function () { r3D.init(); } 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"></div> 
 
<div id="images" style="visibility:hidden"> 
	<img alt="" src="../images/3dball2.gif"> 
	<img alt="" src="../images/3dball.gif"> 
	<img alt="" src="../images/3dball2.gif"> 
	<img alt="" src="../images/3dball.gif"> 
	<img alt="" src="../images/3dball2.gif"> 
	<img alt="" src="../images/3dball.gif"> 
	<img alt="" src="../images/3dball2.gif"> 
</div> 
</body> 
</html>

Tagged with: 3D