<!DOCTYPE html>
<html>
<head>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="true">
<meta name="msvalidate.01" content="B6C713C1F4E407129EDEF7810A8B9BCB" />
<meta name="description" content="HTML5制作的3D相册，使用鼠标拖拽，能看到3D旋转效果，点击相片，相片能放大，移近。程序员发挥自己的专长，这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术，需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。">
<meta name="keywords" content="canvas,3D,perspective,texturing,gallery">
<link rel="stylesheet" href="css/slider-wb.css">
<link rel="shortcut icon" href="/favicon.ico?1e4e94"/>
<title>HTML5制作的3D相册</title>
<style>
html {
overflow: hidden;
-ms-touch-action: none;
-ms-content-zooming: none;
}
body {
position: absolute;
margin: 0px;
padding: 0px;
background: #fff;
width: 100%;
height: 100%;
}
#canvas {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}
</style>
<script src="js/ge1doot.js"></script>
<script>
/*
* ==============================================================
* CANVAS 3D experiment -
* http://www.dhteumeuleu.com/
* Author Gerard Ferrandez - 7 June 2010
* ------------------------------------------------------------
* GFX: Vieeto Voom - http://www.flickr.com/photos/vieeto_voom/
* ------------------------------------------------------------
* Javascript released under the MIT license
* http://www.dhteumeuleu.com/LICENSE.html
* Last updated: 12 Dec 2012
* ===============================================================
*/
"use strict";
(function () {
/* ==== definitions ==== */
var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1, 2],
// ---- poly constructor ----
Poly = function (parent, face) {
this.parent = parent;
this.ctx = ctx;
this.color = face.fill || false;
this.points = [];
if (!face.img) {
// ---- create points ----
for (var i = 0; i < 4; i++) {
this.points[i] = new ge1doot.transform3D.Point(
parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
parent.pc.y + face.y[i],
parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
);
}
this.points[3].next = false;
}
},
// ---- diapo constructor ----
Diapo = function (path, img, structure) {
// ---- create image ----
this.img = new ge1doot.transform3D.Image(
this, path + img.img, 1, {
isLoaded: function (img) {
img.parent.isLoaded = true;
img.parent.loaded(img);
}
}
);
this.visible = false;
this.normalX = img.nx;
this.normalZ = img.nz;
// ---- point center ----
this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
// ---- target positions ----
this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
// ---- create polygons ----
this.poly = [];
for (var i = -1, p; p = structure[++i]; ) {
layers[i] = (p.img === true ? 1 : 2);
this.poly.push(
new Poly(this, p)
);
}
},
// ---- init section ----
init = function (json) {
// draw poly primitive
Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
// ---- init screen ----
scr = new ge1doot.Screen({
container: "canvas"
});
ctx = scr.ctx;
scr.resize();
// ---- init pointer ----
pointer = new ge1doot.Pointer({
tap: function () {
if (camera.over) {
if (camera.over === camera.target.elem) {
// ---- return to the center ----
camera.target.x = 0;
camera.target.z = 0;
camera.target.elem = false;
} else {
// ---- goto diapo ----
camera.target.elem = camera.over;
camera.target.x = camera.over.tx;
camera.target.z = camera.over.tz;
// ---- adapt tesselation level to distance ----
for (var i = 0, d; d = diapo[i++]; ) {
var dx = camera.target.x - d.pc.x;
var dz = camera.target.z - d.pc.z;
var dist = Math.sqrt(dx * dx + dz * dz);
var lev = (dist > 1500) ? quality[0] : quality[1];
d.img.setLevel(lev);
}
}
}
}
});
// ---- init camera ----
camera = new ge1doot.transform3D.Camera({
focalLength: Math.sqrt(scr.width) * 10,
easeTranslation: 0.025,
easeRotation: 0.06,
disableRz: true
}, {
move: function () {
this.over = false;
// ---- rotation ----
if (pointer.isDraging) {
this.target.elem = false;
this.target.ry = -pointer.Xi * 0.01;
this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
} else {
if (this.target.elem) {
this.target.ry = Math.atan2(
this.target.elem.pc.x - this.x,
this.target.elem.pc.z - this.z
);
}
}
this.target.rx *= 0.9;
}
});
camera.z = -10000;
camera.py = 0;
// ---- create images ----
for (var i = 0, img; img = json.imgdata[i++]; ) {
diapo.push(
new Diapo(
json.options.imagesPath,
img,
json.structure
)
);
}
// ---- start engine ---- >>>
setInterval(function () {
quality = (fps > 50) ? [2, 3] : [1, 2];
fps = 0;
}, 1000);
run();
},
// ---- main loop ----
run = function () {
// ---- clear screen ----
ctx.clearRect(0, 0, scr.width, scr.height);
// ---- camera ----
camera.move();
// ---- draw layers ----
for (var k = -1, l; l = layers[++k]; ) {
light = false;
for (var i = 0, d; d = diapo[i++]; ) {
(l === 1 && d.draw()) ||
(d.visible && d.poly[k].draw());
}
}
// ---- cursor ----
if (camera.over && !pointer.isDraging) {
scr.setCursor("pointer");
} else {
scr.setCursor("move");
}
// ---- loop ----
fps++;
requestAnimFrame(run);
};
/* ==== prototypes ==== */
Poly.prototype.draw = function () {
// ---- color light ----
var c = this.color;
if (c.light || !light) {
var s = c.light ? this.parent.light : 1;
// ---- rgba color ----
light = "rgba(" +
Math.round(c.r * s) + "," +
Math.round(c.g * s) + "," +
Math.round(c.b * s) + "," + (c.a || 1) + ")";
ctx.fillStyle = light;
}
// ---- paint poly ----
if (!c.light || this.parent.light < 1) {
// ---- projection ----
for (
var i = 0;
this.points[i++].projection();
);
this.drawPoly();
ctx.fill();
}
}
/* ==== image onload ==== */
Diapo.prototype.loaded = function (img) {
// ---- create
3D.rar （24个子文件） 
3D images 
2.jpg 60KB 11.jpg 60KB
facebook.png 412B 8.jpg 60KB 6.jpg 60KB 1.jpg 60KB twitter.png 440B 12.jpg 60KB 4.jpg 60KB 5.jpg 60KB tsina.png 635B 9.jpg 60KB qzone.png 1010B 10.jpg 60KB 7.jpg 60KB 3.jpg 60KB js 
imageTransform3D.js 10KB ga.js 400B ge1doot.js 8KB analytics.js 22KB util.js 2KB jquery-1.7.2.min.js 93KB
3D相册.html 16KB css slider-wb.css 4KB资源评论
