烈士3D图片展览

这篇具有很好参考价值的文章主要介绍了烈士3D图片展览。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

烈士 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 < 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" href="http://www.webhek.com/favicon.ico?1e4e94"/>
<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画布技术,请使用谷歌浏览器。</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 href="http://www.webhek.com/">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>文章来源地址https://www.toymoban.com/news/detail-829844.html

到了这里,关于烈士3D图片展览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 毕设 疫情数据分析与3D可视化 - python 大数据

    🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。 为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天

    2024年02月10日
    浏览(43)
  • 计算机毕设 大数据全国疫情数据分析与3D可视化 - python 大数据

    🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。 为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天

    2024年02月08日
    浏览(46)
  • JavaScript实现背景图像切换3D动画效果

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月20日
    浏览(52)
  • [论文阅读]FCAF3D——全卷积无锚 3D 物体检测

    FCAF3D:Fully Convolutional Anchor-Free 3D Object Detection FCAF3D:全卷积无锚 3D 物体检测 论文网址:Fcaf3d 代码网址:Fcaf3d 这篇论文介绍了一个用于室内3D物体检测的全卷积 Anchor-Free 方法 FCAF3D。主要贡献如下: 提出了第一个用于室内3D物体检测的全卷积Anchor-Free方法FCAF3D。 提出了一种新的

    2024年02月03日
    浏览(42)
  • 3D卷积网络论文阅读笔记

    数据集 BraTS 2020 数据增强方法 • Flipping翻转: 以1/3的概率随机沿着三个轴之一翻转 • Rotation旋转: 从限定范围(0到 15◦或到30◦或到60◦或到90◦)的均匀分布中随机选择角度旋转 • Scale缩放: 通过从范围为±10%或为±20%的均匀分布中随机选择的因子,对每个轴进行缩放 • Br

    2023年04月10日
    浏览(43)
  • JavaScript+canvas实现一个旋转的3D球动画效果

    1. 获取Canvas元素和设置初始参数 这部分代码主要是获取Canvas元素,并根据设备的DPI进行缩放。然后,定义了一些全局变量,包括Canvas的宽度、高度、球体旋转的角度和存储所有点的数组。 2. 定义一些常量 这部分代码定义了一些常量,如点的数量、点的半径、球半径等。 3.定

    2024年01月18日
    浏览(54)
  • (附源码)使用 javascript 制作网页端 3D 贪吃蛇游戏

    3D 网页版贪吃蛇游戏!下面来具体讲一下如何实现。 该游戏使用 Hightopo 的 SDK 制作,总共 100 多行代码,没有 WebG L基础的同学们也可很快掌握。 首先,我们对页面进行初始化,包括初始化3D场景,设置地面网格,以及开启事件监听等。主要代码及注释如下: 贪吃蛇每次吃完

    2024年02月10日
    浏览(36)
  • 【3D目标检测】Fastpillars-2023论文

    论文:fastpillars.pdf https://arxiv.org/abs/2302.02367 作者:东南大学,美团 代码:https://github.com/StiphyJay/FastPillars (暂未开源) 讲解:https://mp.weixin.qq.com/s/ocNH2QBoD2AeK-rLFK6wEQ PointPillars简单地利用max-pooling操作来聚合所有在支柱中使用点特征,这会大量减少本地细粒度信息,尤其会降低

    2024年02月03日
    浏览(44)
  • 《3D Diffusion Policy》论文阅读

    本文仅是个人对该文章的阅读总结,并不能全篇概括作者的精华,还需大家详细阅读原文 --------------------------------------------------------------------------------------------------------------------------------- 问题: 模仿学习为教授机器人灵巧技能提供了一种高效途径,但是学习复杂的、具有普

    2024年04月11日
    浏览(35)
  • 人体3D重建-ICON论文解读

    论文: 《ICON : Implicit Clothed humans Obtained from Normals》 github: https://github.com/yuliangxiu/icon 现有方法需要3D扫描或者具有精心控制的2D图像进行3D重建,作者提出ICON, 可通过不受约束的2D图像建模 ,结合所有建模结果生成动画; 现有方法对各种姿势人体3D建模不够鲁棒 ,由于使用全

    2023年04月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包