烈士 3D图片展览模块：展示烈士图片、旋转、放大、缩小、查看等功能。选择一些具有代表性的烈士图片放在上面，以供人们瞻仰，定期更换部分图片。

使用JavaScript类库，如 `imageTransform3D.js` 和 `jquery` 实现3D图片展览。

本节详细介绍了3D图片展览的实现，主要的代码定义位于`imageTransform3D.js`文件中。在这个文件中，我们定义了3D图片的基本结构、位置、3D坐标结构（x、y、z）、以及不同功能的函数、初始化变量和绘制多边形等。

注释：1. `drawPoly`函数用于绘制多边形，通过Canvas API绘制了一个由四个点组成的多边形。

2. `Camera`构造函数定义了相机的属性和行为，包括位置（x、y、z）、旋转（rx、ry、rz）、焦距、缓动设置、是否启用各轴旋转等。其中，`target`属性用于指定相机的目标位置和旋转角度。

这一部分代码实现了3D图片展览的基础，通过Canvas绘制多边形，以及通过相机的设置实现了对场景的控制。

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

        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

    ) && (

        this.Y > -sh * 0.5 && this.Y

    );

    // ----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)

                (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

烈士3D图片展览馆

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;

}

/* 

 * ==============================================================

 * 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

                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

            // ---- 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

            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: ""

    }

});

你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。

                    

• Home

            

烈士3D图片展览馆

.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;

}

      XiaoFei