3D Photo List

<!
DOCTYPE html>
<html>
<head>
<title>You See - 3D photo Early</title>
<link href='http://silverhillshss.org/forum//extensions/Smile/tango/face-devil-g
rin.png' rel='shortcut icon'/>
<style type="text/css">
html {
overflow: hidden;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#screen {
position: absolute;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
font-family: Segoe UI, Verdana, Arial, Sans-Serif;
color: #fff;
}
#screen canvas {
position: absolute;
width: 100%;
height: 100%;
background:#000 url(http://www.putracyber4rt.us.tc/images/backgr
ound3.gif) repeat;
background-attachment:fixed;
position: absolute;
}
</style>

<script type="text/javascript" src="http://www.dhteumeuleu.com/dhtml/library/scr
eenEventsHandler.js"></script>
<script type="text/javascript" src="http://www.dhteumeuleu.com/dhtml/library/Eas
ingInOut.js"></script>
<script type="text/javascript" src="http://www.dhteumeuleu.com/dhtml/library/tex
tureMapping.js"></script>
<script type="text/javascript">
// =============================================================
//
===== CANVAS 3D experiment =====
// script written by Gerard Ferrandez - February 14, 2012
// http://www.dhteumeuleu.com/
// =============================================================
"use strict";
(function () {
// ======== private vars ========
var faces = [];
var scr, target, targetold, faceOver;
var globalRX = 0, globalRY = 0;
// ---- tweening engine ---var tweens = ge1doot.tweens;

// ---- camera ---var camera = {
x: new tweens.Add(100),
y: new tweens.Add(100),
z: new tweens.Add(100, 0,0),
rx: new tweens.Add(100, 0,0, true),
ry: new tweens.Add(100, 0,0, true),
zoom: new tweens.Add(100, 0.1, 1),
focalLength: 500,
centered: false,
cosX: 0,
cosY: 0,
sinX: 0,
sinY: 0,
setTarget: function (target) {
// ---- set position ---this.x.setTarget(target.pc.x);
this.y.setTarget(target.pc.y);
this.z.setTarget(target.pc.z);
// ---- set view angles ---this.rx.setTarget((Math.PI * 0.5) - target.ax - globalRX
);
this.ry.setTarget((Math.PI * 0.5) - target.ay - globalRY
);
// ---- zoom ---this.zoom.setTarget(target.f.zoom ? target.f.zoom : 2);
this.centered = false;
},
center: function () {
this.x.setTarget(0);
this.y.setTarget(0);
this.z.setTarget(0);
this.zoom.setTarget(1);
this.centered = true;
},
move: function () {
// ---- easing camera position and view angle ---tweens.iterate();
// ---- additional drag/touch rotations ---globalRX += (((-scr.dragY * 0.01) - globalRX) * 0.1);
globalRY += (((-scr.dragX * 0.01) - globalRY) * 0.1);
if (!this.centered && scr.drag) {
// ---- reset zoom & position ---this.center();
targetold = false;
}
// ---- pre calculate trigo ---this.cosX = Math.cos(this.rx.value + globalRX);
this.sinX = Math.sin(this.rx.value + globalRX);
this.cosY = Math.cos(this.ry.value + globalRY);
this.sinY = Math.sin(this.ry.value + globalRY);
},
rotate: function (x, y, z) {
// ---- 3D rotation ---return {
x: this.cosY * x - this.sinY * z,
y: this.sinX * (this.cosY * z + this.sinY * x) +
this.cosX * y,
z: this.cosX * (this.cosY * z + this.sinY * x) this.sinX * y

}
}
}
// ======== points constructor ========
var Point = function (parentFace, point, rotate) {
this.face = parentFace;
this.x = point[0];
this.y = point[1];
this.z = point[2];
this.scale = 0;
this.X = 0;
this.Y = 0;
if (rotate) {
this.x += rotate.x;
this.y += rotate.y;
this.z += rotate.z;
}
return this;
};
// ======== points projection ========
Point.prototype.projection = function () {
// ---- 3D rotation ---var p = camera.rotate(
this.x - camera.x.value,
this.y - camera.y.value,
this.z - camera.z.value
);
// ---- distance to the camera ---if (this.face) {
var z = p.z + camera.focalLength;
var distance = Math.sqrt(p.x * p.x + p.y * p.y + z * z);
if (distance > this.face.distance) this.face.distance =
distance;
}
// --- 2D projection ---this.scale = (camera.focalLength / (p.z + camera.focalLength)) *
camera.zoom.value;
this.X = (scr.width * 0.5) + (p.x * this.scale);
this.Y = (scr.height * 0.5) + (p.y * this.scale);
};
// ======= faces constructor ========
var Face = function (path, f) {
this.f = f;
var w = f.w * 0.5;
var h = f.h * 0.5;
var ax = f.rx * Math.PI * 0.5;
var ay = f.ry * Math.PI * 0.5;
this.locked = false;
this.hidden = f.hidden || null;
this.visible = true;
this.distance = 0;
// ---- center point ---this.pc = new Point(this, [f.x, f.y, f.z]);
// ---- 3D transform ---var transform = function (x, y, z, ax, ay) {
var tz = z * Math.cos(ay) + x * Math.sin(ay);
var ty = y * Math.cos(ax) + tz * Math.sin(ax);
return {
x: x * Math.cos(ay) - z * Math.sin(ay),
y: ty,
z: tz * Math.cos(ax) - y * Math.sin(ax)
}
};
// ---- quad points ---this.p0 = new Point(this, [f.x, f.y, f.z], transform(-w, -h, 0,
ax, ay));
this.p1 = new Point(this, [f.x, f.y, f.z], transform( w, -h, 0,
ax, ay));
this.p2 = new Point(this, [f.x, f.y, f.z], transform( w, h, 0,
ax, ay));
this.p3 = new Point(this, [f.x, f.y, f.z], transform(-w, h, 0,
ax, ay));
// ---- corner points ---this.c0 = new Point(false, [f.x, f.y, f.z], transform(-w, -h, -1
5, ax, ay));
this.c1 = new Point(false, [f.x, f.y, f.z], transform( w, -h, -1
5, ax, ay));
this.c2 = new Point(false, [f.x, f.y, f.z], transform( w, h, -1
5, ax, ay));
this.c3 = new Point(false, [f.x, f.y, f.z], transform(-w, h, -1
5, ax, ay));
// ---- target angle ---var r = transform(ax, ay, 0, ax, ay, 0);
this.ax = r.x + Math.PI / 2;
this.ay = r.y + Math.PI / 2;
// ---- create 3D image ---this.img = new ge1doot.textureMapping.Image(scr.canvas, path + f
.src, f.tl || 2);
};
// ======== face projection ========
Face.prototype.projection = function () {
this.visible = true;
this.distance = -99999;
// ---- points projection ---this.p0.projection();
this.p1.projection();
// ---- back face culling ---if (!(
((this.p1.Y - this.p0.Y) / (this.p1.X - this.p0.X) (this.p2.Y - this.p0.Y) / (this.p2.X - this.p0.X) < 0) ^
(this.p0.X <= this.p1.X == this.p0.X > this.p2.X)
) || this.hidden) {
this.visible = false;
this.distance = -99999;
if (!this.locked && this.hidden === false) this.hidden =
true;
}
};
// ======== face border ========
Face.prototype.border = function () {
this.c0.projection();
this.pc.projection();
scr.ctx.beginPath();
scr.ctx.moveTo(this.c0.X, this.c0.Y);
scr.ctx.lineTo(this.c1.X, this.c1.Y);
scr.ctx.closePath();
scr.ctx.strokeStyle = "rgb(255,255,255)";
scr.ctx.lineWidth = this.pc.scale * this.f.w / 30;
scr.ctx.lineJoin = "round";
scr.ctx.stroke();
};
// ======== update pointer style (PC) ========
var pointer = function () {
// ---- on mouse over ---target = false;
var i = 0, f;
while ( f = faces[i++] ) {
if (f.visible) {
if (
f.img.pointerInside(
scr.mouseX,
scr.mouseY,
f.p0, f.p1, f.p2, f.p3
)
) target = f;
} else break;
}
if (target && target.f.select != false && !scr.drag) {
faceOver = target;
scr.container.style.cursor = "pointer";
} else scr.container.style.cursor = "move";
};
// ======== onclick ========
var click = function () {
pointer();
// ---- target image ---if (target && target.f.select != false) {
if (target == targetold) {
// ---- reset scene ---camera.center();
targetold = false;
} else {
targetold = target;
target.locked = false;
// ---- target redirection ---if (target.f.target != "") {
var i = 0, f;
if (f.f.id && f.f.id == target.f
.target) {
target = f;
targetold = f;
if (f.hidden) {
f.hidden = false
;
f.locked = true;
targetold = fals
e;
}
break;
}
}
}
// ---- move camera ---target.pc.projection();
camera.setTarget(target);
}
}
};
////////////////////////////////////////////////////////////////////////
////
var init = function (json) {
// ---- init script ---scr = new ge1doot.screen.InitEvents({
container: "screen",
canvas: "canvas",
click: click,
move: pointer
});
// ---- create faces ---var i = 0, f;
while ( f = json.faces[i++] ) {
faces.push(
new Face(json.path, f)
);
}
// ---- engine start ---run();
};
////////////////////////////////////////////////////////////////////////
////
// ===== main loop =====
var run = function () {
// ---- clear screen ---scr.ctx.clearRect(0,0, scr.width, scr.height);
// ---- 3D projection ---var i = 0, f;
f.projection();
}
// ---- faces depth sorting ---faces.sort(function (p0, p1) {
return p1.distance - p0.distance;
});
// ---- drawing ---var i = 0, f;
if (f.visible) {
// ---- draw image ---f.img.draw3D(f.p0, f.p1, f.p2, f.p3);
if (f.locked && scr.drag) f.locked = false;
if (f === faceOver) faceOver.border();
} else break;
}
// ---- camera ---camera.move();
// ---- loop ---setTimeout(run, 16);
}
return {
////////////////////////////////////////////////////////////////
////////////
// ---- onload event ---load : function (json) {
window.addEventListener('load', function () {
setTimeout(function () {
init(json);
}, 500);
}, false);
}
}
})().load({
path: "",
faces: [
// ---- main images ---{id: "1", src:"http://upl0ad.co.cc/upload/love_in_the_middle_of_
good_vs_evil_by_sammi723-d4rg04l.jpg",
x:0,
y:0,
z:200, rx:0, ry:0,
w: 300, h: 200, select: false},
{id: "2", src:"http://upl0ad.co.cc/upload/early%20logo.png", x:
200, y:0,
z:0,
rx:0, ry:-1, w: 300, h: 200},
{id: "3", src:"http://upl0ad.co.cc/upload/3rd%20early%20logo.png
", x:0,
y:150, z:0,
rx:1, ry:0, w: 300, h: 200},
{id: "4", src:"http://upl0ad.co.cc/upload/2nd%20early%20logo.png
", x:0,
y:-150, z:0,
rx:-1, ry:0, w: 300, h: 200},
{id: "5", src:"http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc7/39
4531_358520104163604_100000168514753_1696993_2014238464_n.jpg", x:-200, y:0,
z:0,
rx:0, ry:1, w: 300, h: 200},
{id: "6", src:"http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/38
8706_341181855897429_100000168514753_1631988_465404207_n.jpg", x:0,
y:0,
z
:-200, rx:0, ry:-2, w: 300, h: 200},
// ---- special hidden image :) ---{id: "7", target: "1", src:"http://upl0ad.co.cc/upload/2nd%20ear
ly%20logo.png", x:0, y:0, z:200, rx:0, ry:-2, w: 300, h: 200, hidden: true},
// ---- small targets ---{src:"http://upl0ad.co.cc/upload/love_in_the_middle_of_good_vs_e
vil_by_sammi723-d4rg04l.jpg", target: "6", x:0,
y:-40, z:170, rx:0, ry:0, w:
80, h: 60, tl: 1},
{src:"http://upl0ad.co.cc/upload/early%20logo.png", target: "5",
x:-100, y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"http://upl0ad.co.cc/upload/3rd%20early%20logo.png", targe
t: "4", x:100, y:-40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/407897_3766
35722352042_100000168514753_1756271_1563649639_n.jpg", target: "3", x:0,
y:4
0, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/40
0256_384551034893844_100000168514753_1778025_1784255601_n.jpg", target: "2", x:
-100, y:40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1},
{src:"http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/32
1227_320282721320676_100000168514753_1570464_1075191984_n.jpg",
target: "7",
x:100, y:40, z:170, rx:0, ry:0, w: 80, h: 60, tl: 1}
]
});
</script>
</head>
<body>
<div id="screen">
<canvas id="canvas">RIDHO D3VIL ART</canvas>

</div>
</body>
<center></object><object data="http://flash-mp3-player.net/medias/player_mp3.swf
" width="0" height="0" type="application/x-shockwave-flash"><param value="#fffff
f" name="bgcolor" /><param value="mp3=http://dc248.4shared.com/img/332485888/a05
62078/dlink__2Fdownload_2F4vxsZGhi_3Ftsid_3D20120313-115029-6f866284/preview.mp3
&loop=1&autoplay=1&volume=125" name="FlashVars" /></object></center>
</html>

3D Photo List

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

3D Photo List

Transféré par

Droits d'auteur :

Formats disponibles

<!

// ---- tweening engine ---var tweens = ge1doot.tweens;

z: this.cosX * (this.cosY * z + this.sinY * x) this.sinX * y

<canvas id="canvas">RIDHO D3VIL ART</canvas>

Vous aimerez peut-être aussi