烈士 3D圖片展覽模塊：展示烈士圖片、旋轉(zhuǎn)、放大、縮小、查看等功能。選擇一些具有代表性的烈士圖片放在上面，以供人們瞻仰，定期更換部分圖片。

使用JavaScript類庫，如?`imageTransform3D.js` 和 `jquery` 實(shí)現(xiàn)3D圖片展覽。

本節(jié)詳細(xì)介紹了3D圖片展覽的實(shí)現(xiàn)，主要的代碼定義位于`imageTransform3D.js`文件中。在這個(gè)文件中，我們定義了3D圖片的基本結(jié)構(gòu)、位置、3D坐標(biāo)結(jié)構(gòu)（x、y、z）、以及不同功能的函數(shù)、初始化變量和繪制多邊形等。

注釋：1. `drawPoly`函數(shù)用于繪制多邊形，通過Canvas API繪制了一個(gè)由四個(gè)點(diǎn)組成的多邊形。

2. `Camera`構(gòu)造函數(shù)定義了相機(jī)的屬性和行為，包括位置（x、y、z）、旋轉(zhuǎn)（rx、ry、rz）、焦距、緩動(dòng)設(shè)置、是否啟用各軸旋轉(zhuǎn)等。其中，`target`屬性用于指定相機(jī)的目標(biāo)位置和旋轉(zhuǎn)角度。

這一部分代碼實(shí)現(xiàn)了3D圖片展覽的基礎(chǔ)，通過Canvas繪制多邊形，以及通過相機(jī)的設(shè)置實(shí)現(xiàn)了對(duì)場景的控制。

imageTransform3D.js

// ==== HTML5 CANVAS transform Image ====
// full 3D version
// @author Gerard Ferrandez / http://www.dhteumeuleu.com/
// last update: Dec 8, 2012
// Released under the MIT license
// http://www.dhteumeuleu.com/LICENSE.html

"use strict";

var ge1doot = ge1doot || {};
ge1doot.transform3D = {};

/* ==== draw Poly ==== */
ge1doot.transform3D.drawPoly = function () {
?? ?this.ctx.beginPath();
?? ?this.ctx.moveTo(this.points[0].X, this.points[0].Y);
?? ?this.ctx.lineTo(this.points[1].X, this.points[1].Y);
?? ?this.ctx.lineTo(this.points[2].X, this.points[2].Y);
?? ?this.ctx.lineTo(this.points[3].X, this.points[3].Y);
?? ?this.ctx.closePath();
}
/* =============== camera constructor ================= */
ge1doot.transform3D.Camera = function (setup, func) {
?? ?ge1doot.camera = this;
?? ?this.x ?= 0;
?? ?this.y ?= 0;
?? ?this.z ?= 0;
?? ?this.rx = 0;
?? ?this.ry = 0;
?? ?this.rz = 0;
?? ?this.focalLength ? ? = setup.focalLength || 500;
?? ?this.easeTranslation = setup.easeTranslation || 0.1;
?? ?this.easeRotation ? ?= setup.easeRotation || 0.025;
?? ?this.enableRx ? ? ? ?= setup.disableRx ? false : true;
?? ?this.enableRy ? ? ? ?= setup.disableRy ? false : true;
?? ?this.enableRz ? ? ? ?= setup.disableRz ? false : true;
?? ?this.cmov = false;
?? ?this.cosX = 1;
?? ?this.sinX = 0;
?? ?this.cosY = 1;
?? ?this.sinY = 0;
?? ?this.cosZ = 1;
?? ?this.sinZ = 0;
?? ?this.target = {
?? ??? ?over: false,
?? ??? ?elem: false,
?? ??? ?x: ?0,
?? ??? ?y: ?0,
?? ??? ?z: ?0,
?? ??? ?rx: 0,
?? ??? ?ry: 0,
?? ??? ?rz: 0
?? ?};
?? ?// ---- def custom move ----
?? ?if (func && func.move) this.cmov = func.move;
}
/* ==== easing ==== */
ge1doot.transform3D.Camera.prototype.ease = function (target, value) {
?? ?while (Math.abs(target - value) > Math.PI) {
?? ??? ?if (target < value) ?value -= 2 * Math.PI;
?? ??? ?else value += 2 * Math.PI;
?? ?}
?? ?return (target - value) * this.easeRotation;
}
/* ==== move / rotate camera ==== */
ge1doot.transform3D.Camera.prototype.move = function () {
?? ?// ---- run custom function ----
?? ?this.cmov && this.cmov();
?? ?// ---- translations ----
?? ?this.x += (this.target.x - this.x) * this.easeTranslation;
?? ?this.y += (this.target.y - this.y) * this.easeTranslation;
?? ?this.z += (this.target.z - this.z) * this.easeTranslation;
?? ?// ---- rotation rx ----
?? ?if (this.enableRx) {
?? ??? ?this.rx += this.ease(this.target.rx, this.rx);
?? ??? ?this.cosX = Math.cos(this.rx);
?? ??? ?this.sinX = Math.sin(this.rx);
?? ?}
?? ?// ---- rotation ry ----
?? ?if (this.enableRy) {
?? ??? ?this.ry += this.ease(this.target.ry, this.ry);
?? ??? ?this.cosY = Math.cos(this.ry);
?? ??? ?this.sinY = Math.sin(this.ry);
?? ?}
?? ?// ---- rotation rz ----
?? ?if (this.enableRz) {
?? ??? ?this.rz += this.ease(this.target.rz, this.rz);
?? ??? ?this.cosZ = Math.cos(this.rz);
?? ??? ?this.sinZ = Math.sin(this.rz);
?? ?}
}
/* =============== point constructor ================= */
ge1doot.transform3D.Point = function (x, y, z, tx, ty) {
?? ?this.x = x;
?? ?this.y = y;
?? ?this.z = z;
?? ?this.tx = tx || 0;
?? ?this.ty = ty || 0;
?? ?this.visible = false;
?? ?this.scale = 0;
?? ?this.X = 0;
?? ?this.Y = 0;
?? ?this.Z = 0;
?? ?this.next = true;
}
/* ==== perspective projection ==== */
ge1doot.transform3D.Point.prototype.projection = function () {
?? ?var sw ? ? ? = this.scr.width ?>> 1;
?? ?var sh ? ? ? = this.scr.height >> 1;
?? ?// ---- 3D coordinates ----
?? ?var nx ? ? ? = this.x - this.camera.x;
?? ?var ny ? ? ? = this.y - this.camera.y;
?? ?var nz ? ? ? = this.z - this.camera.z;
?? ?// ---- 3D rotation and projection ----
?? ?if (this.camera.enableRz) {
?? ??? ?var u = this.camera.sinZ * ny + this.camera.cosZ * nx;
?? ??? ?var t = this.camera.cosZ * ny - this.camera.sinZ * nx;
?? ?} else {
?? ??? ?var u = nx;
?? ??? ?var t = ny;
?? ?}
?? ?var s ? ? ? ?= this.camera.cosY * nz + this.camera.sinY * u;
?? ?this.Z ? ? ? = this.camera.cosX * s ?- this.camera.sinX * t;
?? ?this.scale ? = this.camera.focalLength / Math.max(1, this.Z);
?? ?this.X ? ? ? = sw + (this.camera.cosY * u ?- this.camera.sinY * nz) * this.scale;
?? ?this.Y ? ? ? = -(this.camera.y >> 1) + sh - (this.camera.sinX * s ?+ this.camera.cosX * t) * this.scale;
?? ?// ---- visibility test ----
?? ?this.visible = (
?? ??? ?this.X > -sw * 0.5 && this.X < sw * 2.5
?? ?) && (
?? ??? ?this.Y > -sh * 0.5 && this.Y < sh * 2.5
?? ?);
?? ?// ----return next (fast loop) ----
?? ?return this.next;
}
/* ==== triangle constructor ==== */
ge1doot.transform3D.Triangle = function (parent, p0, p1, p2) {
?? ?this.ctx = parent.ctx;
?? ?this.texture = parent.texture;
?? ?this.p0 ?= p0;
?? ?this.p1 ?= p1;
?? ?this.p2 ?= p2;
?? ?this.d ? = p0.tx * (p2.ty - p1.ty) - p1.tx * p2.ty + p2.tx * p1.ty + (p1.tx - p2.tx) * p0.ty;
?? ?this.pmy = p1.ty - p2.ty;
?? ?this.pmx = p1.tx - p2.tx;
?? ?this.pxy = p2.tx * p1.ty - p1.tx * p2.ty;
?? ?if (parent.t) parent.t.next = true;
}
/* ==== draw triangle ==== */
ge1doot.transform3D.Triangle.prototype.draw = function () {
?? ?if (this.p0.visible || this.p1.visible || this.p2.visible) {
?? ??? ?var dx, dy, d;
?? ??? ?// ---- centroid ----
?? ??? ?var xc = (this.p0.X + this.p1.X + this.p2.X) / 3;
?? ??? ?var yc = (this.p0.Y + this.p1.Y + this.p2.Y) / 3;
?? ??? ?// ---- clipping ----
?? ??? ?this.ctx.save();
?? ??? ?this.ctx.beginPath();
?? ??? ?dx = xc - this.p0.X;
?? ??? ?dy = yc - this.p0.Y;
?? ??? ?d = Math.max(Math.abs(dx), Math.abs(dy));
?? ??? ?this.ctx.moveTo(this.p0.X - 2 * (dx / d), this.p0.Y - 2 * (dy / d));
?? ??? ?dx = xc - this.p1.X;
?? ??? ?dy = yc - this.p1.Y;
?? ??? ?d = Math.max(Math.abs(dx), Math.abs(dy));
?? ??? ?this.ctx.lineTo(this.p1.X - 2 * (dx / d), this.p1.Y - 2 * (dy / d));
?? ??? ?dx = xc - this.p2.X;
?? ??? ?dy = yc - this.p2.Y;
?? ??? ?d = Math.max(Math.abs(dx), Math.abs(dy));
?? ??? ?this.ctx.lineTo(this.p2.X - 2 * (dx / d), this.p2.Y - 2 * (dy / d));
?? ??? ?this.ctx.closePath();
?? ??? ?this.ctx.clip();
?? ??? ?// ---- transform ----
?? ??? ?var t0 = this.p2.X ?- this.p1.X,
?? ??? ??? ?t1 = this.p1.Y ?- this.p2.Y,
?? ??? ??? ?t2 = this.p2.ty * this.p1.X,
?? ??? ??? ?t3 = this.p1.tx * this.p2.X,
?? ??? ??? ?t4 = this.p2.ty * this.p1.Y,
?? ??? ??? ?t5 = this.p1.ty * this.p2.X,
?? ??? ??? ?t6 = this.p1.ty * this.p2.Y,
?? ??? ??? ?t7 = this.p2.tx * this.p1.X,
?? ??? ??? ?t8 = this.p1.tx * this.p2.Y,
?? ??? ??? ?t9 = this.p2.tx * this.p1.Y;
?? ??? ?this.ctx.transform(
?? ??? ??? ?-(this.p0.ty * t0 - t5 + t2 + this.pmy * this.p0.X) / this.d, // m11
?? ??? ??? ? (t6 + this.p0.ty * t1 - t4 - this.pmy * this.p0.Y) / this.d, // m12
?? ??? ??? ? (this.p0.tx * t0 - t3 + t7 + this.pmx * this.p0.X) / this.d, // m21
?? ??? ??? ?-(t8 + this.p0.tx * t1 - t9 - this.pmx * this.p0.Y) / this.d, // m22
?? ??? ??? ? (this.p0.tx * (t2 - t5) + this.p0.ty * (t3 - t7) + this.pxy * this.p0.X) / this.d, // dx
?? ??? ??? ? (this.p0.tx * (t4 - t6) + this.p0.ty * (t8 - t9) + this.pxy * this.p0.Y) / this.d ?// dy
?? ??? ?);
?? ??? ?// ---- draw ----
?? ??? ?this.ctx.drawImage(this.texture, 0, 0);
?? ??? ?this.ctx.restore();
?? ?}
?? ?return this.next;
}
/* ===================== image constructor ========================== */
ge1doot.transform3D.Image = function (parent, imgSrc, lev, callback) {
?? ?this.parent ? ? ? ?= parent;
?? ?this.points ? ? ? ?= [];
?? ?this.triangles ? ? = [];
?? ?this.ctx ? ? ? ? ? = ge1doot.screen.ctx;
?? ?this.pointer ? ? ? = ge1doot.pointer;
?? ?this.texture ? ? ? = new Image();
?? ?this.texture.src ? = imgSrc;
?? ?this.isLoading ? ? = true;
?? ?this.callback ? ? ?= callback;
?? ?this.textureWidth ?= 0;
?? ?this.textureHeight = 0;
?? ?this.level ? ? ? ? = lev || 1;
?? ?this.visible ? ? ? = false;
?? ?this.t ? ? ? ? ? ? = false;
?? ?if (!ge1doot.transform3D.Point.prototype.scr) {
?? ??? ?ge1doot.transform3D.Point.prototype.scr ? ?= ge1doot.screen;
?? ??? ?ge1doot.transform3D.Point.prototype.camera = ge1doot.camera;
?? ?}
}
/* ==== drawPoly prototype ==== */
ge1doot.transform3D.Image.prototype.drawPoly = ge1doot.transform3D.drawPoly;
/* ==== change tessellation level prototype ==== */
ge1doot.transform3D.Image.prototype.setLevel = function (level) {
?? ?this.points.length = 0;
?? ?this.triangles.length = 0;
?? ?this.level = level;
?? ?this.loading();
}
/* ==== loading prototype ==== */
ge1doot.transform3D.Image.prototype.loading = function () {
?? ?if (this.texture.complete) {
?? ??? ?var dir = [0,1,1,0,0,0,1,1];
?? ??? ?this.isLoading = false;
?? ??? ?// ---- image size ----
?? ??? ?this.textureWidth = this.texture.width;
?? ??? ?this.textureHeight = this.texture.height;
?? ??? ?// ---- isLoaded callback ---
?? ??? ?this.callback && this.callback.isLoaded && this.callback.isLoaded(this);
?? ??? ?// ---- texture position ----
?? ??? ?for (var i = -1, p; p = this.points[++i];) {
?? ??? ??? ?p.tx = this.textureWidth ?* dir[i];
?? ??? ??? ?p.ty = this.textureHeight * dir[i+4];
?? ??? ?}
?? ??? ?// ---- triangularization ----
?? ??? ?this.triangulate(this.points[0], this.points[1], this.points[2], this.level);
?? ??? ?this.triangulate(this.points[0], this.points[2], this.points[3], this.level);
?? ??? ?// ---- last point ----
?? ??? ?this.points[this.points.length - 1].next = false;
?? ?}
}
/* ==== vector bisection function ==== */
ge1doot.transform3D.Image.prototype.subdivise = function (p0, p1) {
?? ?return {
?? ??? ?x: ?(p1.x + p0.x) ? * 0.5,
?? ??? ?y: ?(p1.y + p0.y) ? * 0.5,
?? ??? ?z: ?(p1.z + p0.z) ? * 0.5,
?? ??? ?tx: (p1.tx + p0.tx) * 0.5,
?? ??? ?ty: (p1.ty + p0.ty) * 0.5
?? ?};
}
/* ==== triangulation ==== */
ge1doot.transform3D.Image.prototype.triangulate = function (p0, p1, p2, level) {
?? ?level--;
?? ?if (level === 0) {
?? ??? ?// final triangle
?? ??? ?this.t = new ge1doot.transform3D.Triangle(this, p0, p1, p2);
?? ??? ?this.triangles.push(this.t);
?? ?} else {
?? ??? ?// ---- subdivision ----
?? ??? ?var p01 = this.subdivise(p0, p1);
?? ??? ?var p12 = this.subdivise(p1, p2);
?? ??? ?var p20 = this.subdivise(p2, p0);
?? ??? ?// ---- insert new points ----
?? ??? ?this.points.push(p01 = new ge1doot.transform3D.Point(p01.x, p01.y, p01.z, p01.tx, p01.ty));
?? ??? ?this.points.push(p12 = new ge1doot.transform3D.Point(p12.x, p12.y, p12.z, p12.tx, p12.ty));
?? ??? ?this.points.push(p20 = new ge1doot.transform3D.Point(p20.x, p20.y, p20.z, p20.tx, p20.ty));
?? ??? ?// ---- recursive triangulation ----
?? ??? ?this.triangulate(p0, ? p01, ?p20, level);
?? ??? ?this.triangulate(p01, ?p1, ? p12, level);
?? ??? ?this.triangulate(p20, ?p12, ?p2, ?level);
?? ??? ?this.triangulate(p01, ?p12, ?p20, level);
?? ?}
}
/* ==== transform prototype ==== */
ge1doot.transform3D.Image.prototype.transform3D = function (backfaceTest) {
?? ?if (this.isLoading) {
?? ??? ?// ---- image is loading ----
?? ??? ?this.loading();
?? ??? ?return false;
?? ?} else {
?? ??? ?// ---- project points ----
?? ??? ?for (
?? ??? ??? ?var i = 0;
?? ??? ??? ?this.points[i++].projection();
?? ??? ?);
?? ??? ?if (backfaceTest) {
?? ??? ??? ?var p0 = this.points[0];
?? ??? ??? ?var p1 = this.points[1];
?? ??? ??? ?var p2 = this.points[2];
?? ??? ??? ?return (
?? ??? ??? ??? ?((p1.Y - p0.Y) / (p1.X - p0.X) -?
?? ??? ??? ??? ?(p2.Y - p0.Y) / (p2.X - p0.X) < 0) ^?
?? ??? ??? ??? ?(p0.X <= p1.X == p0.X > p2.X)
?? ??? ??? ?);
?? ??? ?} else return true;
?? ?}
}
/* ==== draw prototype ==== */
ge1doot.transform3D.Image.prototype.draw = function () {
?? ?if (!this.isLoading) {
?? ??? ?// ---- draw triangles ----
?? ??? ?for (
?? ??? ??? ?var i = 0;
?? ??? ??? ?this.triangles[i++].draw();
?? ??? ?);
?? ?}
}
/* ==== isPointerInside prototype ==== */
ge1doot.transform3D.Image.prototype.isPointerInside = function (x, y) {
?? ?this.drawPoly(this.points);
?? ?return this.ctx.isPointInPath(x, y);
}

52CL.htm

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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="烈士3D圖片展覽館">
<meta name="keywords" content="canvas,3D,perspective,texturing,gallery">
<link href="3dxc/slider-wb.css" rel='stylesheet' type='text/css' />
<link rel="shortcut icon" />
<title>烈士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 type="text/javascript" src="3dxc/analytics.js"></script><script type="text/javascript" src="3dxc/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 points ----
?? ??? ?var d = [-1,1,1,-1,1,1,-1,-1];
?? ??? ?var w = img.texture.width ?* 0.5;
?? ??? ?var h = img.texture.height * 0.5;
?? ??? ?for (var i = 0; i < 4; i++) {
?? ??? ??? ?img.points[i] = new ge1doot.transform3D.Point(
?? ??? ??? ??? ?this.pc.x + (w * this.normalZ * d[i]),
?? ??? ??? ??? ?this.pc.y + (h * d[i + 4]),
?? ??? ??? ??? ?this.pc.z + (w * this.normalX * d[i])
?? ??? ??? ?);
?? ??? ?}
?? ?}
?? ?/* ==== images draw ==== */
?? ?Diapo.prototype.draw = function () {
?? ??? ?// ---- visibility ----
?? ??? ?this.pc.projection();
?? ??? ?if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
?? ??? ??? ?// ---- light ----
?? ??? ??? ?this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
?? ??? ??? ?// ---- draw image ----
?? ??? ??? ?this.visible = true;
?? ??? ??? ?this.img.draw();
?? ??? ??? ?// ---- test pointer inside ----
?? ??? ??? ?if (pointer.hasMoved || pointer.isDown) {
?? ??? ??? ??? ?if (
?? ??? ??? ??? ??? ?this.img.isPointerInside(
?? ??? ??? ??? ??? ??? ?pointer.X,
?? ??? ??? ??? ??? ??? ?pointer.Y
?? ??? ??? ??? ??? ?)
?? ??? ??? ??? ?) camera.over = this;
?? ??? ??? ?}
?? ??? ?} else this.visible = false;
?? ??? ?return true;
?? ?}
?? ?return {
?? ??? ?// --- load data ----
?? ??? ?load : function (data) {
?? ??? ??? ?window.addEventListener('load', function () {
?? ??? ??? ??? ?ge1doot.loadJS(
?? ??? ??? ??? ??? ?"3dxc/imageTransform3D.js",
?? ??? ??? ??? ??? ?init, data
?? ??? ??? ??? ?);
?? ??? ??? ?}, false);
?? ??? ?}
?? ?}
})().load({
?? ?imgdata:[
?? ??? ?// north
?? ??? ?{img:'3dxc/Images/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
?? ??? ?{img:'3dxc/Images/2.jpg', x:0, ? ? y:0, z:1500, nx:0, nz:1},
?? ??? ?{img:'3dxc/Images/3.jpg', x:1000, ?y:0, z:1500, nx:0, nz:1},
?? ??? ?// east
?? ??? ?{img:'3dxc/Images/4.jpg', x:1500, ?y:0, z:1000, nx:-1, nz:0},
?? ??? ?{img:'3dxc/Images/5.jpg', x:1500, ?y:0, z:0, nx:-1, nz:0},
?? ??? ?{img:'3dxc/Images/6.jpg', x:1500, ?y:0, z:-1000, nx:-1, nz:0},
?? ??? ?// south
?? ??? ?{img:'3dxc/Images/7.jpg', x:1000, ?y:0, z:-1500, nx:0, nz:-1},
?? ??? ?{img:'3dxc/Images/8.jpg', x:0, ? ? y:0, z:-1500, nx:0, nz:-1},
?? ??? ?{img:'3dxc/Images/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
?? ??? ?// west
?? ??? ?{img:'3dxc/Images/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
?? ??? ?{img:'3dxc/Images/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
?? ??? ?{img:'3dxc/Images/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}
?? ?],
?? ?structure:[
?? ??? ?{
?? ??? ??? ?// wall
?? ??? ??? ?fill: {r:255, g:255, b:255, light:1},
?? ??? ??? ?x: [-1001,-490,-490,-1001],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [500,500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// wall
?? ??? ??? ?fill: {r:255, g:255, b:255, light:1},
?? ??? ??? ?x: [-501,2,2,-500],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [500,500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// wall
?? ??? ??? ?fill: {r:255, g:255, b:255, light:1},
?? ??? ??? ?x: [0,502,502,0],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [500,500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// wall
?? ??? ??? ?fill: {r:255, g:255, b:255, light:1},
?? ??? ??? ?x: [490,1002,1002,490],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [500,500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// shadow
?? ??? ??? ?fill: {r:0, g:0, b:0, a:0.2},
?? ??? ??? ?x: [-420,420,420,-420],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [150, 150,-320,-320]
?? ??? ?},{
?? ??? ??? ?// shadow
?? ??? ??? ?fill: {r:0, g:0, b:0, a:0.2},
?? ??? ??? ?x: [-20,20,20,-20],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [250, 250,150,150]
?? ??? ?},{
?? ??? ??? ?// shadow
?? ??? ??? ?fill: {r:0, g:0, b:0, a:0.2},
?? ??? ??? ?x: [-20,20,20,-20],
?? ??? ??? ?z: [-500,-500,-500,-500],
?? ??? ??? ?y: [-320, -320,-500,-500]
?? ??? ?},{
?? ??? ??? ?// shadow
?? ??? ??? ?fill: {r:0, g:0, b:0, a:0.2},
?? ??? ??? ?x: [-20,20,10,-10],
?? ??? ??? ?z: [-500,-500,-100,-100],
?? ??? ??? ?y: [-500, -500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// base
?? ??? ??? ?fill: {r:32, g:32, b:32},
?? ??? ??? ?x: [-50,50,50,-50],
?? ??? ??? ?z: [-150,-150,-50,-50],
?? ??? ??? ?y: [-500,-500,-500,-500]
?? ??? ?},{
?? ??? ??? ?// support
?? ??? ??? ?fill: {r:16, g:16, b:16},
?? ??? ??? ?x: [-10,10,10,-10],
?? ??? ??? ?z: [-100,-100,-100,-100],
?? ??? ??? ?y: [300,300,-500,-500]
?? ??? ?},{
?? ??? ??? ?// frame
?? ??? ??? ?fill: {r:255, g:255, b:255},
?? ??? ??? ?x: [-320,-320,-320,-320],
?? ??? ??? ?z: [0,-20,-20,0],
?? ??? ??? ?y: [-190,-190,190,190]
?? ??? ?},{
?? ??? ??? ?// frame
?? ??? ??? ?fill: {r:255, g:255, b:255},
?? ??? ??? ?x: [320,320,320,320],
?? ??? ??? ?z: [0,-20,-20,0],
?? ??? ??? ?y: [-190,-190,190,190]
?? ??? ?},
?? ??? ?{img:true},
?? ??? ?{
?? ??? ??? ?// ceilingLight
?? ??? ??? ?fill: {r:255, g:128, b:0},
?? ??? ??? ?x: [-50,50,50,-50],
?? ??? ??? ?z: [450,450,550,550],
?? ??? ??? ?y: [500,500,500,500]
?? ??? ?},{
?? ??? ??? ?// groundLight
?? ??? ??? ?fill: {r:255, g:128, b:0},
?? ??? ??? ?x: [-50,50,50,-50],
?? ??? ??? ?z: [450,450,550,550],
?? ??? ??? ?y: [-500,-500,-500,-500]
?? ??? ?}
?? ?],
?? ?options:{
?? ??? ?imagesPath: ""
?? ?}
});
</script>
<script type="text/javascript" src="3dxc/imageTransform3D.js"></script></head>
<body>
<canvas style="cursor: move;" height="933" width="1920" id="canvas">你的瀏覽器不支持HTML5畫布技術(shù)，請(qǐng)使用谷歌瀏覽器。</canvas>
<!-- dhteumeuleu nav menu -->
<div id="nav">
?? ?<input name="nav-switch" id="nav-switch" type="checkbox">
?? ?<label class="label" for="nav-switch">
?? ??? ?<div class="container">
?? ??? ??? ?<div class="nav-on">
?? ??? ??? ??? ?<ul class="menu">
?? ??? ??? ??? ??? ?<li class="home"><a >Home</a></li>
?? ??? ??? ?</ul></div>
?? ??? ??? ?<div class="nav-off">
?? ??? ??? ??? ?<div id="icon"><div></div><div></div></div>
?? ??? ??? ??? ?<h1 class="title">烈士3D圖片展覽館</h1>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</label>
</div>?
<!-- end of dhteumeuleu nav menu -->
<div style="position: absolute; top: 20px; right: 20px;"> ? ?<style type="text/css">
.Qg{height: 30px;}
.iI {
? ? background: url(/misc-res/images/share.png) no-repeat scroll 0px 0px rgba(0, 0, 0, 0);
? ? display: inline-block;
? ? height: 16px;
? ? margin-bottom: 3px;
? ? vertical-align: middle;
? ? width: 16px;
}
.jI {
? ? margin-left: 2px;
? ? color: #000000;
}
.RF{
? float: left;
}

.Dg {
? ? background-color: #FFFFFF;
? ? border: 1px solid #D9D9D9;
? ? border-radius: 3px;
? ? box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
? ? cursor: pointer;
? ? float: left;
? ? height: 28px;
? ? line-height: 28px;
? ? margin-left: 8px;
? ? outline: medium none;
? ? padding: 0 10px;
? ? transition: background-color 0.218s ease 0s, border-color 0.218s ease 0s, box-shadow 0.218s ease 0s;
? ? width: auto;
}.RF {
? ? border-radius: 0 0 3px;
? ? height: 100%;
? ? line-height: 30px;
? ? outline: medium none;
? ? overflow: hidden;
? ? padding-left: 7px;
? ? padding-right: 16px;
? ? position: relative;
}
.IH {
? ? display: inline-block;
? ? max-width: 200px;
}.JH {
? ? display: inline-block;
? ? margin-right: 4px;
? ? margin-top: 1px;
}
.ho {
? ? border-radius: 2px;
}
? ? </style>
? ? <div class="Qg">
? ? ? <div class="Dg"><span class="tf"><span class="iI"></span><span class="MM jI">XiaoFei</span></span></div>
? ? ?
? ? </div></div>
<script type="text/javascript" src="3dxc/jquery-1.js"></script>
<script type="text/javascript" src="3dxc/util.js"></script>
<script type="text/javascript" src="3dxc/ga.js"></script>

</body></html>文章來源地址http://www.zghlxwxcb.cn/news/detail-829844.html

到了這里，關(guān)于烈士3D圖片展覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！