• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    HTML+CSS+JavaScript实现图片3D展览的示例代码

    发布者: Error | 发布时间: 2025-6-16 12:33| 查看数: 63| 评论数: 0|帖子模式

    一、图片3D展览效果
    上传图片的大小有限制，录制的GIF图展示效果不是很好

    录屏的效果见链接：https://www.bilibili.com/video/BV1Bi4y1E7wk/
    二、代码实现
    1. HTML代码
    1. <!DOCTYPE HTML>
    2. <html>
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    6.     <meta name="HandheldFriendly" content="true">
    7.     <meta name="description" content="图片3D展览屋">
    8.     <meta name="keywords" content="canvas,3D_picture,perspective,texturing,gallery">
    9.     <link href="res/slider-wb.css" rel="stylesheet">
    10.     <title>图片3D展览屋</title>
    11.     <style>
    12.         html
    13.         {
    14.             overflow:visible;
    15.             -ms-touch-action: none;
    16.             -ms-content-zooming: none;
    17.         }
    18.         body
    19.         {
    20.             position: absolute;
    21.             margin: 0px;
    22.             padding: 0px;
    23.             background: #fff;
    24.             width: 100%;
    25.             height: 100%;
    26.         }
    27.         #canvas
    28.         {
    29.             position: absolute;
    30.             width: 100%;
    31.             height: 100%;
    32.             background: #fff;
    33.         }
    34.     </style>
    35.     <script type="text/javascript" src="res/ge1doot.js"></script>
    36.     <script type="text/javascript">

    38.         "use strict";

    40.         (function () {
    41.             /* ==== definitions ==== */
    42.             var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1, 2],
    43.             // ---- poly constructor ----
    44.         Poly = function (parent, face) {
    45.             this.parent = parent;
    46.             this.ctx = ctx;
    47.             this.color = face.fill || false;
    48.             this.points = [];
    49.             if (!face.img) {
    50.                 // ---- create points ----
    51.                 for (var i = 0; i < 4; i++) {
    52.                     this.points[i] = new ge1doot.transform3D.Point(
    53.                                         parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
    54.                                         parent.pc.y + face.y[i],
    55.                                         parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
    56.                                 );
    57.                 }
    58.                 this.points[3].next = false;
    59.             }
    60.         },
    61.             // ---- diapo constructor ----
    62.         Diapo = function (path, img, structure) {
    63.             // ---- create image ----
    64.             this.img = new ge1doot.transform3D.Image(
    65.                         this, path + img.img, 1, {
    66.                             isLoaded: function (img) {
    67.                                 img.parent.isLoaded = true;
    68.                                 img.parent.loaded(img);
    69.                             }
    70.                         }
    71.                 );
    72.             this.visible = false;
    73.             this.normalX = img.nx;
    74.             this.normalZ = img.nz;
    75.             // ---- point center ----
    76.             this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
    77.             // ---- target positions ----
    78.             this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
    79.             this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
    80.             // ---- create polygons ----
    81.             this.poly = [];
    82.             for (var i = -1, p; p = structure[++i]; ) {
    83.                 layers[i] = (p.img === true ? 1 : 2);
    84.                 this.poly.push(
    85.                                 new Poly(this, p)
    86.                         );
    87.             }
    88.         },
    89.             // ---- init section ----
    90.         init = function (json) {
    91.             // draw poly primitive
    92.             Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
    93.             // ---- init screen ----
    94.             scr = new ge1doot.Screen({
    95.                 container: "canvas"
    96.             });
    97.             ctx = scr.ctx;
    98.             scr.resize();
    99.             // ---- init pointer ----
    100.             pointer = new ge1doot.Pointer({
    101.                 tap: function () {
    102.                     if (camera.over) {
    103.                         if (camera.over === camera.target.elem) {
    104.                             // ---- return to the center ----
    105.                             camera.target.x = 0;
    106.                             camera.target.z = 0;
    107.                             camera.target.elem = false;
    108.                         } else {
    109.                             // ---- goto diapo ----
    110.                             camera.target.elem = camera.over;
    111.                             camera.target.x = camera.over.tx;
    112.                             camera.target.z = camera.over.tz;
    113.                             // ---- adapt tesselation level to distance ----
    114.                             for (var i = 0, d; d = diapo[i++]; ) {
    115.                                 var dx = camera.target.x - d.pc.x;
    116.                                 var dz = camera.target.z - d.pc.z;
    117.                                 var dist = Math.sqrt(dx * dx + dz * dz);
    118.                                 var lev = (dist > 1500) ? quality[0] : quality[1];
    119.                                 d.img.setLevel(lev);
    120.                             }
    121.                         }
    122.                     }
    123.                 }
    124.             });
    125.             // ---- init camera ----
    126.             camera = new ge1doot.transform3D.Camera({
    127.                 focalLength: Math.sqrt(scr.width) * 10,
    128.                 easeTranslation: 0.025,
    129.                 easeRotation: 0.06,
    130.                 disableRz: true
    131.             }, {
    132.                 move: function () {
    133.                     this.over = false;
    134.                     // ---- rotation ----
    135.                     if (pointer.isDraging) {
    136.                         this.target.elem = false;
    137.                         this.target.ry = -pointer.Xi * 0.01;
    138.                         this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
    139.                     } else {
    140.                         if (this.target.elem) {
    141.                             this.target.ry = Math.atan2(
    142.                                                         this.target.elem.pc.x - this.x,
    143.                                                         this.target.elem.pc.z - this.z
    144.                                                 );
    145.                         }
    146.                     }
    147.                     this.target.rx *= 0.9;
    148.                 }
    149.             });
    150.             camera.z = -10000;
    151.             camera.py = 0;
    152.             // ---- create images ----
    153.             for (var i = 0, img; img = json.imgdata[i++]; ) {
    154.                 diapo.push(
    155.                                 new Diapo(
    156.                                         json.options.imagesPath,
    157.                                         img,
    158.                                         json.structure
    159.                                 )
    160.                         );
    161.             }
    162.             // ---- start engine ---- >>>
    163.             setInterval(function () {
    164.                 quality = (fps > 50) ? [2, 3] : [1, 2];
    165.                 fps = 0;
    166.             }, 1000);
    167.             run();
    168.         },
    169.             // ---- main loop ----
    170.         run = function () {
    171.             // ---- clear screen ----
    172.             ctx.clearRect(0, 0, scr.width, scr.height);
    173.             // ---- camera ----
    174.             camera.move();
    175.             // ---- draw layers ----
    176.             for (var k = -1, l; l = layers[++k]; ) {
    177.                 light = false;
    178.                 for (var i = 0, d; d = diapo[i++]; ) {
    179.                     (l === 1 && d.draw()) ||
    180.                                 (d.visible && d.poly[k].draw());
    181.                 }
    182.             }
    183.             // ---- cursor ----
    184.             if (camera.over && !pointer.isDraging) {
    185.                 scr.setCursor("pointer");
    186.             } else {
    187.                 scr.setCursor("move");
    188.             }
    189.             // ---- loop ----
    190.             fps++;
    191.             requestAnimFrame(run);
    192.         };
    193.             /* ==== prototypes ==== */
    194.             Poly.prototype.draw = function () {
    195.                 // ---- color light ----
    196.                 var c = this.color;
    197.                 if (c.light || !light) {
    198.                     var s = c.light ? this.parent.light : 1;
    199.                     // ---- rgba color ----
    200.                     light = "rgba(" +
    201.                                 Math.round(c.r * s) + "," +
    202.                                 Math.round(c.g * s) + "," +
    203.                                 Math.round(c.b * s) + "," + (c.a || 1) + ")";
    204.                     ctx.fillStyle = light;
    205.                 }
    206.                 // ---- paint poly ----
    207.                 if (!c.light || this.parent.light < 1) {
    208.                     // ---- projection ----
    209.                     for (
    210.                                 var i = 0;
    211.                                 this.points[i++].projection();
    212.                         );
    213.                     this.drawPoly();
    214.                     ctx.fill();
    215.                 }
    216.             }
    217.             /* ==== image onload ==== */
    218.             Diapo.prototype.loaded = function (img) {
    219.                 // ---- create points ----
    220.                 var d = [-1, 1, 1, -1, 1, 1, -1, -1];
    221.                 var w = img.texture.width * 0.5;
    222.                 var h = img.texture.height * 0.5;
    223.                 for (var i = 0; i < 4; i++) {
    224.                     img.points[i] = new ge1doot.transform3D.Point(
    225.                                 this.pc.x + (w * this.normalZ * d[i]),
    226.                                 this.pc.y + (h * d[i + 4]),
    227.                                 this.pc.z + (w * this.normalX * d[i])
    228.                         );
    229.                 }
    230.             }
    231.             /* ==== images draw ==== */
    232.             Diapo.prototype.draw = function () {
    233.                 // ---- visibility ----
    234.                 this.pc.projection();
    235.                 if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
    236.                     // ---- light ----
    237.                     this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
    238.                     // ---- draw image ----
    239.                     this.visible = true;
    240.                     this.img.draw();
    241.                     // ---- test pointer inside ----
    242.                     if (pointer.hasMoved || pointer.isDown) {
    243.                         if (
    244.                                         this.img.isPointerInside(
    245.                                                 pointer.X,
    246.                                                 pointer.Y
    247.                                         )
    248.                                 ) camera.over = this;
    249.                     }
    250.                 } else this.visible = false;
    251.                 return true;
    252.             }
    253.             return {
    254.                 // --- load data ----
    255.                 load: function (data) {
    256.                     window.addEventListener('load', function () {
    257.                         ge1doot.loadJS(
    258.                                         "res/imageTransform3D.js",
    259.                                         init, data
    260.                                 );
    261.                     }, false);
    262.                 }
    263.             }
    264.         })().load({
    265.             imgdata: [
    266.             // north
    267.                 {img: 'imgs/001.jpg', x: -1000, y: 0, z: 1500, nx: 0, nz: 1 },
    268.                 { img: 'imgs/002.jpg', x: 0, y: 0, z: 1500, nx: 0, nz: 1 },
    269.                 { img: 'imgs/003.jpg', x: 1000, y: 0, z: 1500, nx: 0, nz: 1 },
    270.             // east
    271.                 {img: 'imgs/004.jpg', x: 1500, y: 0, z: 1000, nx: -1, nz: 0 },
    272.                 { img: 'imgs/005.jpg', x: 1500, y: 0, z: 0, nx: -1, nz: 0 },
    273.                 { img: 'imgs/006.jpg', x: 1500, y: 0, z: -1000, nx: -1, nz: 0 },
    274.             // south
    275.                 {img: 'imgs/007.jpg', x: 1000, y: 0, z: -1500, nx: 0, nz: -1 },
    276.                 { img: 'imgs/008.jpg', x: 0, y: 0, z: -1500, nx: 0, nz: -1 },
    277.                 { img: 'imgs/009.jpg', x: -1000, y: 0, z: -1500, nx: 0, nz: -1 },
    278.             // west
    279.                 {img: 'imgs/010.jpg', x: -1500, y: 0, z: -1000, nx: 1, nz: 0 },
    280.                 { img: 'imgs/011.jpg', x: -1500, y: 0, z: 0, nx: 1, nz: 0 },
    281.                 { img: 'imgs/012.jpg', x: -1500, y: 0, z: 1000, nx: 1, nz: 0 }
    282.         ],
    283.             structure: [
    284.                 {
    285.                     // wall
    286.                     fill: { r: 255, g: 255, b: 255, light: 1 },
    287.                     x: [-1001, -490, -490, -1001],
    288.                     z: [-500, -500, -500, -500],
    289.                     y: [500, 500, -500, -500]
    290.                 }, {
    291.                     // wall
    292.                     fill: { r: 255, g: 255, b: 255, light: 1 },
    293.                     x: [-501, 2, 2, -500],
    294.                     z: [-500, -500, -500, -500],
    295.                     y: [500, 500, -500, -500]
    296.                 }, {
    297.                     // wall
    298.                     fill: { r: 255, g: 255, b: 255, light: 1 },
    299.                     x: [0, 502, 502, 0],
    300.                     z: [-500, -500, -500, -500],
    301.                     y: [500, 500, -500, -500]
    302.                 }, {
    303.                     // wall
    304.                     fill: { r: 255, g: 255, b: 255, light: 1 },
    305.                     x: [490, 1002, 1002, 490],
    306.                     z: [-500, -500, -500, -500],
    307.                     y: [500, 500, -500, -500]
    308.                 }, {
    309.                     // shadow
    310.                     fill: { r: 0, g: 0, b: 0, a: 0.2 },
    311.                     x: [-420, 420, 420, -420],
    312.                     z: [-500, -500, -500, -500],
    313.                     y: [150, 150, -320, -320]
    314.                 }, {
    315.                     // shadow
    316.                     fill: { r: 0, g: 0, b: 0, a: 0.2 },
    317.                     x: [-20, 20, 20, -20],
    318.                     z: [-500, -500, -500, -500],
    319.                     y: [250, 250, 150, 150]
    320.                 }, {
    321.                     // shadow
    322.                     fill: { r: 0, g: 0, b: 0, a: 0.2 },
    323.                     x: [-20, 20, 20, -20],
    324.                     z: [-500, -500, -500, -500],
    325.                     y: [-320, -320, -500, -500]
    326.                 }, {
    327.                     // shadow
    328.                     fill: { r: 0, g: 0, b: 0, a: 0.2 },
    329.                     x: [-20, 20, 10, -10],
    330.                     z: [-500, -500, -100, -100],
    331.                     y: [-500, -500, -500, -500]
    332.                 }, {
    333.                     // base
    334.                     fill: { r: 32, g: 32, b: 32 },
    335.                     x: [-50, 50, 50, -50],
    336.                     z: [-150, -150, -50, -50],
    337.                     y: [-500, -500, -500, -500]
    338.                 }, {
    339.                     // support
    340.                     fill: { r: 16, g: 16, b: 16 },
    341.                     x: [-10, 10, 10, -10],
    342.                     z: [-100, -100, -100, -100],
    343.                     y: [300, 300, -500, -500]
    344.                 }, {
    345.                     // frame
    346.                     fill: { r: 255, g: 255, b: 255 },
    347.                     x: [-320, -320, -320, -320],
    348.                     z: [0, -20, -20, 0],
    349.                     y: [-190, -190, 190, 190]
    350.                 }, {
    351.                     // frame
    352.                     fill: { r: 255, g: 255, b: 255 },
    353.                     x: [320, 320, 320, 320],
    354.                     z: [0, -20, -20, 0],
    355.                     y: [-190, -190, 190, 190]
    356.                 },
    357.                 { img: true },
    358.                 {
    359.                     // ceilingLight
    360.                     fill: { r: 255, g: 128, b: 0 },
    361.                     x: [-50, 50, 50, -50],
    362.                     z: [450, 450, 550, 550],
    363.                     y: [500, 500, 500, 500]
    364.                 }, {
    365.                     // groundLight
    366.                     fill: { r: 255, g: 128, b: 0 },
    367.                     x: [-50, 50, 50, -50],
    368.                     z: [450, 450, 550, 550],
    369.                     y: [-500, -500, -500, -500]
    370.                 }
    371.         ],
    372.             options: {
    373.                 imagesPath: ""
    374.             }
    375.         });
    376. </script>
    377. </head>
    378. <body>
    379. <a href="https://blog.csdn.net/fyfugoyfa/article/details/108845194" target="_blank">CSDN文章</a><br />
    380.     <canvas id="canvas">建议用谷歌浏览器打开</canvas>
    381. </body>
    382. </html>
    复制代码
    2. CSS代码
    1. #icon {
    2.         background: rgb(255, 144, 0); border-radius: 6px 0px 0px; transition:0.6s ease-in-out; left: 65px; top: 6px; width: 40px; height: 40px; overflow: hidden; position: relative; cursor: pointer; -moz-transition: all 0.6s ease-in-out 0s; -webkit-transition: all 0.6s ease-in-out 0s; -o-transition: all 0.6s ease-in-out 0s;
    3. }
    4. #icon div {
    5.         background: none; position: absolute;
    6. }
    7. #icon div:nth-child(1) {
    8.         border-width: 7px 0px 7px 8px; border-style: solid; border-color: transparent rgb(255, 255, 255); left: 20px; top: 50%; width: 0px; height: 0px; margin-top: -7px; position: absolute;
    9. }
    10. #icon div:nth-child(2) {
    11.         background: rgb(255, 255, 255); left: 12px; top: 50%; width: 8px; height: 6px; margin-top: -3px; position: absolute;
    12. }
    13. #nav {
    14.         top: 10px; width: 100px; height: 0px; position: absolute; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none;
    15. }
    16. #nav-switch {
    17.         display: none;
    18. }
    19. #nav .label {
    20.         display: block; cursor: pointer;
    21. }
    22. #nav .container {
    23.         transition:left 0.3s ease-in-out; left: -100px; width: 100%; position: absolute; -moz-transition: left 0.3s ease-in-out 0s; -webkit-transition: left 0.3s ease-in-out 0s; -o-transition: left 0.3s ease-in-out 0s;
    24. }
    25. #nav .container > div {
    26.         padding: 0px; width: 50%; float: left;
    27. }
    28. #nav .container .nav-on {
    29.         color: rgb(51, 51, 51); padding-left: 0px;
    30. }
    31. #nav .container .nav-off {
    32.         width: 40px; height: 40px; padding-right: 10px;
    33. }
    34. :checked#nav-switch + .label .container {
    35.         left: 10px;
    36. }
    37. :checked#nav-switch + .label #icon {
    38.         background: rgb(0, 101, 203); border-radius: 0px 0px 6px; transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg);
    39. }
    40. .title {
    41.         margin: 0px; padding: 0px; left: 170px; top: 2px; height: 40px; color: rgb(51, 51, 51); line-height: 40px; font-family: "Segoe UI Light", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: bold; white-space: nowrap; position: absolute; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
    42. }
    43. .menu {
    44.         margin: 0px; padding: 0px; left: 0px; top: 6px; color: rgb(51, 51, 51); font-family: "Segoe UI Light", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1em; font-weight: lighter; list-style-type: none; position: relative; cursor: pointer;
    45. }
    46. .menu li {
    47.         list-style: none; width: 100px; height: 40px; border-right-color: rgb(221, 221, 221); border-right-width: 1px; border-right-style: solid; position: relative; cursor: pointer;
    48. }
    49. .menu a {
    50.         color: rgb(51, 51, 51); line-height: 40px; padding-left: 40px; text-decoration: none; display: block; position: relative;
    51. }
    52. .menu li a:hover {
    53.         background: rgb(255, 144, 0);
    54. }
    55. .menu li a:focus {
    56.         background: rgb(255, 144, 0);
    57. }
    58. .menu li a:active {
    59.         background: rgb(255, 144, 0);
    60. }
    61. #nav li::before {
    62.         top: 50%; margin-left: 10px; position: absolute; content: "";
    63. }
    64. #nav li::after {
    65.         top: 50%; margin-left: 10px; position: absolute; content: "";
    66. }
    67. #nav li a::before {
    68.         top: 50%; margin-left: 10px; position: absolute; content: "";
    69. }
    70. #nav li a::after {
    71.         top: 50%; margin-left: 10px; position: absolute; content: "";
    72. }
    73. #nav .home a::before {
    74.         border-width: 8px 7px; border-style: solid; border-color: transparent transparent rgb(51, 51, 51); left: 2px; margin-top: -16px;
    75. }
    76. #nav .home a::after {
    77.         border-width: 3px 4px 0px; border-style: solid; border-color: rgb(51, 51, 51) rgb(51, 51, 51) transparent; left: 4px; width: 2px; height: 4px; margin-top: 0px;
    78. }
    79. #nav .arrow a::before {
    80.         border-width: 7px 0px 7px 8px; border-style: solid; border-color: transparent rgb(51, 51, 51); left: 8px; margin-top: -7px;
    81. }
    82. #nav .arrow a::after {
    83.         background: rgb(51, 51, 51); left: 0px; width: 8px; height: 6px; margin-top: -3px;
    84. }
    85. #nav .back.arrow a::before {
    86.         border-width: 7px 8px 7px 0px; left: 0px;
    87. }
    88. #nav .back.arrow a::after {
    89.         left: 8px;
    90. }
    91. #nav .list a::before {
    92.         background: none; border-width: 6px 0px; border-style: double; border-color: rgb(51, 51, 51); left: 5px; top: 14px; width: 12px; height: 2px;
    93. }
    94. #nav .list a::after {
    95.         background: none; border-width: 6px 0px; border-style: double; border-color: rgb(51, 51, 51); left: 1px; top: 14px; width: 2px; height: 2px;
    96. }
    复制代码
    3. JavaScript代码
    1. // ===== ge1doot global =====    js文件1
    2. var ge1doot = ge1doot || {
    3.         json: null,
    4.         screen: null,
    5.         pointer: null,
    6.         camera: null,
    7.         loadJS: function (url, callback, data) {
    8.                 if (typeof url == "string") url = [url];
    9.                 var load = function (src) {
    10.                         var script = document.createElement("script");
    11.                                 if (callback) {
    12.                                         if (script.readyState){
    13.                                                 script.onreadystatechange = function () {
    14.                                                         if (script.readyState == "loaded" || script.readyState == "complete"){
    15.                                                                 script.onreadystatechange = null;
    16.                                                                 if (--n === 0) callback(data || false);
    17.                                                         }
    18.                                                 }
    19.                                         } else {
    20.                                                 script.onload = function() {
    21.                                                         if (--n === 0) callback(data || false);
    22.                                                 }
    23.                                         }
    24.                                 }
    25.                                 script.src = src;
    26.                                 document.getElementsByTagName("head")[0].appendChild(script);
    27.                 }
    28.                 for (var i = 0, n = url.length; i < n; i++) load(url[i]);
    29.         }
    30. }

    32. // ===== html/canvas container =====
    33. ge1doot.Screen = function (setup) {
    34.         ge1doot.screen = this;
    35.         this.elem = document.getElementById(setup.container) || setup.container;
    36.         this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false;
    37.         this.style = this.elem.style;
    38.         this.left = 0;
    39.         this.top = 0;
    40.         this.width = 0;
    41.         this.height = 0;
    42.         this.cursor = "default";
    43.         this.setup = setup;
    44.         this.resize = function () {
    45.                 var o = this.elem;
    46.                 this.width  = o.offsetWidth;
    47.                 this.height = o.offsetHeight;
    48.                 for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
    49.                         this.left += o.offsetLeft;
    50.                         this.top  += o.offsetTop;
    51.                 }
    52.                 if (this.ctx) {
    53.                         this.elem.width  = this.width;
    54.                         this.elem.height = this.height;
    55.                 }
    56.                 this.setup.resize && this.setup.resize();
    57.         }
    58.         this.setCursor = function (type) {
    59.                 if (type !== this.cursor && 'ontouchstart' in window === false) {
    60.                         this.cursor = type;
    61.                         this.style.cursor = type;
    62.                 }
    63.         }
    64.         window.addEventListener('resize', function () {
    65.                 ge1doot.screen.resize();
    66.         }, false);
    67.         !this.setup.resize && this.resize();
    68. }

    70. // ==== unified touch events handler ====
    71. ge1doot.Pointer = function (setup) {
    72.         ge1doot.pointer = this;
    73.         var self        = this;
    74.         var body        = document.body;
    75.         var html        = document.documentElement;
    76.         this.setup      = setup;
    77.         this.screen     = ge1doot.screen;
    78.         this.elem       = this.screen.elem;
    79.         this.X          = 0;
    80.         this.Y          = 0;
    81.         this.Xi         = 0;
    82.         this.Yi         = 0;
    83.         this.bXi        = 0;
    84.         this.bYi        = 0;
    85.         this.Xr         = 0;
    86.         this.Yr         = 0;
    87.         this.startX     = 0;
    88.         this.startY     = 0;
    89.         this.scale      = 0;
    90.         this.wheelDelta = 0;
    91.         this.isDraging  = false;
    92.         this.hasMoved   = false;
    93.         this.isDown     = false;
    94.         this.evt        = false;
    95.         var sX          = 0;
    96.         var sY          = 0;
    97.         // prevent default behavior
    98.         if (setup.tap) this.elem.onclick = function () { return false; }
    99.         if (!setup.documentMove) {
    100.                 document.ontouchmove = function(e) { e.preventDefault(); }
    101.         }
    102.         document.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
    103.         if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";

    105.         this.pointerDown = function (e) {
    106.                 if (!this.isDown) {
    107.                         if (this.elem.setCapture) this.elem.setCapture();
    108.                         this.isDraging = false;
    109.                         this.hasMoved = false;
    110.                         this.isDown = true;
    111.                         this.evt = e;
    112.                         this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
    113.                         this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
    114.                         this.X  = sX = this.Xr - this.screen.left;
    115.                         this.Y  = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
    116.                         this.setup.down && this.setup.down(e);
    117.                 }
    118.         }
    119.         this.pointerMove = function(e) {
    120.                 this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
    121.                 this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
    122.                 this.X  = this.Xr - this.screen.left;
    123.                 this.Y  = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
    124.                 if (this.isDown) {
    125.                         this.Xi = this.bXi + (this.X - sX);
    126.                         this.Yi = this.bYi - (this.Y - sY);
    127.                 }
    128.                 if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11) {
    129.                         this.hasMoved = true;
    130.                         if (this.isDown) {
    131.                                 if (!this.isDraging) {
    132.                                         this.startX = sX;
    133.                                         this.startY = sY;
    134.                                         this.setup.startDrag && this.setup.startDrag(e);
    135.                                         this.isDraging = true;
    136.                                 } else {
    137.                                         this.setup.drag && this.setup.drag(e);
    138.                                 }
    139.                         } else {
    140.                                 sX = this.X;
    141.                                 sY = this.Y;
    142.                         }
    143.                 }
    144.                 this.setup.move && this.setup.move(e);
    145.         }
    146.         this.pointerUp = function(e) {
    147.                 this.bXi = this.Xi;
    148.                 this.bYi = this.Yi;
    149.                 if (!this.hasMoved) {
    150.                         this.X = sX;
    151.                         this.Y = sY;
    152.                         this.setup.tap && this.setup.tap(this.evt);
    153.                 } else {
    154.                         this.setup.up && this.setup.up(this.evt);
    155.                 }
    156.                 this.isDraging = false;
    157.                 this.isDown = false;
    158.                 this.hasMoved = false;
    159.                 this.setup.up && this.setup.up(this.evt);
    160.                 if (this.elem.releaseCapture) this.elem.releaseCapture();
    161.                 this.evt = false;
    162.         }
    163.         this.pointerCancel = function(e) {
    164.                 if (this.elem.releaseCapture) this.elem.releaseCapture();
    165.                 this.isDraging = false;
    166.                 this.hasMoved = false;
    167.                 this.isDown = false;
    168.                 this.bXi = this.Xi;
    169.                 this.bYi = this.Yi;
    170.                 sX = 0;
    171.                 sY = 0;
    172.         }
    173.         if ('ontouchstart' in window) {
    174.                 this.elem.ontouchstart      = function (e) { self.pointerDown(e); return false;  }
    175.                 this.elem.ontouchmove       = function (e) { self.pointerMove(e); return false;  }
    176.                 this.elem.ontouchend        = function (e) { self.pointerUp(e); return false;    }
    177.                 this.elem.ontouchcancel     = function (e) { self.pointerCancel(e); return false;}
    178.         }
    179.         document.addEventListener("mousedown", function (e) {
    180.                 if (
    181.                         e.target === self.elem ||
    182.                         (e.target.parentNode && e.target.parentNode === self.elem) ||
    183.                         (e.target.parentNode.parentNode && e.target.parentNode.parentNode === self.elem)
    184.                 ) {
    185.                         if (typeof e.stopPropagation != "undefined") {
    186.                                 e.stopPropagation();
    187.                         } else {
    188.                                 e.cancelBubble = true;
    189.                         }
    190.                         e.preventDefault();
    191.                         self.pointerDown(e);
    192.                 }
    193.         }, false);
    194.         document.addEventListener("mousemove", function (e) { self.pointerMove(e); }, false);
    195.         document.addEventListener("mouseup",   function (e) {
    196.                 self.pointerUp(e);
    197.         }, false);
    198.         document.addEventListener('gesturechange', function(e) {
    199.                 e.preventDefault();
    200.                 if (e.scale > 1) self.scale = 0.1; else if (e.scale < 1) self.scale = -0.1; else self.scale = 0;
    201.                 self.setup.scale && self.setup.scale(e);
    202.                 return false;
    203.         }, false);
    204.         if (window.navigator.msPointerEnabled) {
    205.                 var nContact = 0;
    206.                 var myGesture = new MSGesture();
    207.                 myGesture.target = this.elem;
    208.                 this.elem.addEventListener("MSPointerDown", function(e) {
    209.                         if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
    210.                                 myGesture.addPointer(e.pointerId);
    211.                                 nContact++;
    212.                         }
    213.                 }, false);
    214.                 this.elem.addEventListener("MSPointerOut", function(e) {
    215.                         if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
    216.                                 nContact--;
    217.                         }
    218.                 }, false);
    219.                 this.elem.addEventListener("MSGestureHold", function(e) {
    220.                         e.preventDefault();
    221.                 }, false);
    222.                 this.elem.addEventListener("MSGestureChange", function(e) {
    223.                         if (nContact > 1) {
    224.                                 if (e.preventDefault) e.preventDefault();
    225.                                 self.scale = e.velocityExpansion;
    226.                                 self.setup.scale && self.setup.scale(e);
    227.                         }
    228.                         return false;
    229.                 }, false);
    230.         }
    231.         if (window.addEventListener) this.elem.addEventListener('DOMMouseScroll', function(e) {
    232.                 if (e.preventDefault) e.preventDefault();
    233.                 self.wheelDelta = e.detail * 10;
    234.                 self.setup.wheel && self.setup.wheel(e);
    235.                 return false;
    236.         }, false);
    237.         this.elem.onmousewheel = function () {
    238.                 self.wheelDelta = -event.wheelDelta * .25;
    239.                 self.setup.wheel && self.setup.wheel(event);
    240.                 return false;
    241.         }
    242. }

    244. // ===== request animation frame =====
    245. window.requestAnimFrame = (function(){
    246.                 return  window.requestAnimationFrame ||
    247.                 window.webkitRequestAnimationFrame   ||
    248.                 window.mozRequestAnimationFrame      ||
    249.                 window.oRequestAnimationFrame        ||
    250.                 window.msRequestAnimationFrame       ||
    251.                 function( run ){
    252.                         window.setTimeout(run, 16);
    253.                 };
    254. })();
    复制代码
    1. // ===== ge1doot global =====    js文件1
    2. var ge1doot = ge1doot || {
    3.         json: null,
    4.         screen: null,
    5.         pointer: null,
    6.         camera: null,
    7.         loadJS: function (url, callback, data) {
    8.                 if (typeof url == "string") url = [url];
    9.                 var load = function (src) {
    10.                         var script = document.createElement("script");
    11.                                 if (callback) {
    12.                                         if (script.readyState){
    13.                                                 script.onreadystatechange = function () {
    14.                                                         if (script.readyState == "loaded" || script.readyState == "complete"){
    15.                                                                 script.onreadystatechange = null;
    16.                                                                 if (--n === 0) callback(data || false);
    17.                                                         }
    18.                                                 }
    19.                                         } else {
    20.                                                 script.onload = function() {
    21.                                                         if (--n === 0) callback(data || false);
    22.                                                 }
    23.                                         }
    24.                                 }
    25.                                 script.src = src;
    26.                                 document.getElementsByTagName("head")[0].appendChild(script);
    27.                 }
    28.                 for (var i = 0, n = url.length; i < n; i++) load(url[i]);
    29.         }
    30. }

    32. // ===== html/canvas container =====
    33. ge1doot.Screen = function (setup) {
    34.         ge1doot.screen = this;
    35.         this.elem = document.getElementById(setup.container) || setup.container;
    36.         this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false;
    37.         this.style = this.elem.style;
    38.         this.left = 0;
    39.         this.top = 0;
    40.         this.width = 0;
    41.         this.height = 0;
    42.         this.cursor = "default";
    43.         this.setup = setup;
    44.         this.resize = function () {
    45.                 var o = this.elem;
    46.                 this.width  = o.offsetWidth;
    47.                 this.height = o.offsetHeight;
    48.                 for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
    49.                         this.left += o.offsetLeft;
    50.                         this.top  += o.offsetTop;
    51.                 }
    52.                 if (this.ctx) {
    53.                         this.elem.width  = this.width;
    54.                         this.elem.height = this.height;
    55.                 }
    56.                 this.setup.resize && this.setup.resize();
    57.         }
    58.         this.setCursor = function (type) {
    59.                 if (type !== this.cursor && 'ontouchstart' in window === false) {
    60.                         this.cursor = type;
    61.                         this.style.cursor = type;
    62.                 }
    63.         }
    64.         window.addEventListener('resize', function () {
    65.                 ge1doot.screen.resize();
    66.         }, false);
    67.         !this.setup.resize && this.resize();
    68. }

    70. // ==== unified touch events handler ====
    71. ge1doot.Pointer = function (setup) {
    72.         ge1doot.pointer = this;
    73.         var self        = this;
    74.         var body        = document.body;
    75.         var html        = document.documentElement;
    76.         this.setup      = setup;
    77.         this.screen     = ge1doot.screen;
    78.         this.elem       = this.screen.elem;
    79.         this.X          = 0;
    80.         this.Y          = 0;
    81.         this.Xi         = 0;
    82.         this.Yi         = 0;
    83.         this.bXi        = 0;
    84.         this.bYi        = 0;
    85.         this.Xr         = 0;
    86.         this.Yr         = 0;
    87.         this.startX     = 0;
    88.         this.startY     = 0;
    89.         this.scale      = 0;
    90.         this.wheelDelta = 0;
    91.         this.isDraging  = false;
    92.         this.hasMoved   = false;
    93.         this.isDown     = false;
    94.         this.evt        = false;
    95.         var sX          = 0;
    96.         var sY          = 0;
    97.         // prevent default behavior
    98.         if (setup.tap) this.elem.onclick = function () { return false; }
    99.         if (!setup.documentMove) {
    100.                 document.ontouchmove = function(e) { e.preventDefault(); }
    101.         }
    102.         document.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
    103.         if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";

    105.         this.pointerDown = function (e) {
    106.                 if (!this.isDown) {
    107.                         if (this.elem.setCapture) this.elem.setCapture();
    108.                         this.isDraging = false;
    109.                         this.hasMoved = false;
    110.                         this.isDown = true;
    111.                         this.evt = e;
    112.                         this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
    113.                         this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
    114.                         this.X  = sX = this.Xr - this.screen.left;
    115.                         this.Y  = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
    116.                         this.setup.down && this.setup.down(e);
    117.                 }
    118.         }
    119.         this.pointerMove = function(e) {
    120.                 this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
    121.                 this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
    122.                 this.X  = this.Xr - this.screen.left;
    123.                 this.Y  = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
    124.                 if (this.isDown) {
    125.                         this.Xi = this.bXi + (this.X - sX);
    126.                         this.Yi = this.bYi - (this.Y - sY);
    127.                 }
    128.                 if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11) {
    129.                         this.hasMoved = true;
    130.                         if (this.isDown) {
    131.                                 if (!this.isDraging) {
    132.                                         this.startX = sX;
    133.                                         this.startY = sY;
    134.                                         this.setup.startDrag && this.setup.startDrag(e);
    135.                                         this.isDraging = true;
    136.                                 } else {
    137.                                         this.setup.drag && this.setup.drag(e);
    138.                                 }
    139.                         } else {
    140.                                 sX = this.X;
    141.                                 sY = this.Y;
    142.                         }
    143.                 }
    144.                 this.setup.move && this.setup.move(e);
    145.         }
    146.         this.pointerUp = function(e) {
    147.                 this.bXi = this.Xi;
    148.                 this.bYi = this.Yi;
    149.                 if (!this.hasMoved) {
    150.                         this.X = sX;
    151.                         this.Y = sY;
    152.                         this.setup.tap && this.setup.tap(this.evt);
    153.                 } else {
    154.                         this.setup.up && this.setup.up(this.evt);
    155.                 }
    156.                 this.isDraging = false;
    157.                 this.isDown = false;
    158.                 this.hasMoved = false;
    159.                 this.setup.up && this.setup.up(this.evt);
    160.                 if (this.elem.releaseCapture) this.elem.releaseCapture();
    161.                 this.evt = false;
    162.         }
    163.         this.pointerCancel = function(e) {
    164.                 if (this.elem.releaseCapture) this.elem.releaseCapture();
    165.                 this.isDraging = false;
    166.                 this.hasMoved = false;
    167.                 this.isDown = false;
    168.                 this.bXi = this.Xi;
    169.                 this.bYi = this.Yi;
    170.                 sX = 0;
    171.                 sY = 0;
    172.         }
    173.         if ('ontouchstart' in window) {
    174.                 this.elem.ontouchstart      = function (e) { self.pointerDown(e); return false;  }
    175.                 this.elem.ontouchmove       = function (e) { self.pointerMove(e); return false;  }
    176.                 this.elem.ontouchend        = function (e) { self.pointerUp(e); return false;    }
    177.                 this.elem.ontouchcancel     = function (e) { self.pointerCancel(e); return false;}
    178.         }
    179.         document.addEventListener("mousedown", function (e) {
    180.                 if (
    181.                         e.target === self.elem ||
    182.                         (e.target.parentNode && e.target.parentNode === self.elem) ||
    183.                         (e.target.parentNode.parentNode && e.target.parentNode.parentNode === self.elem)
    184.                 ) {
    185.                         if (typeof e.stopPropagation != "undefined") {
    186.                                 e.stopPropagation();
    187.                         } else {
    188.                                 e.cancelBubble = true;
    189.                         }
    190.                         e.preventDefault();
    191.                         self.pointerDown(e);
    192.                 }
    193.         }, false);
    194.         document.addEventListener("mousemove", function (e) { self.pointerMove(e); }, false);
    195.         document.addEventListener("mouseup",   function (e) {
    196.                 self.pointerUp(e);
    197.         }, false);
    198.         document.addEventListener('gesturechange', function(e) {
    199.                 e.preventDefault();
    200.                 if (e.scale > 1) self.scale = 0.1; else if (e.scale < 1) self.scale = -0.1; else self.scale = 0;
    201.                 self.setup.scale && self.setup.scale(e);
    202.                 return false;
    203.         }, false);
    204.         if (window.navigator.msPointerEnabled) {
    205.                 var nContact = 0;
    206.                 var myGesture = new MSGesture();
    207.                 myGesture.target = this.elem;
    208.                 this.elem.addEventListener("MSPointerDown", function(e) {
    209.                         if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
    210.                                 myGesture.addPointer(e.pointerId);
    211.                                 nContact++;
    212.                         }
    213.                 }, false);
    214.                 this.elem.addEventListener("MSPointerOut", function(e) {
    215.                         if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
    216.                                 nContact--;
    217.                         }
    218.                 }, false);
    219.                 this.elem.addEventListener("MSGestureHold", function(e) {
    220.                         e.preventDefault();
    221.                 }, false);
    222.                 this.elem.addEventListener("MSGestureChange", function(e) {
    223.                         if (nContact > 1) {
    224.                                 if (e.preventDefault) e.preventDefault();
    225.                                 self.scale = e.velocityExpansion;
    226.                                 self.setup.scale && self.setup.scale(e);
    227.                         }
    228.                         return false;
    229.                 }, false);
    230.         }
    231.         if (window.addEventListener) this.elem.addEventListener('DOMMouseScroll', function(e) {
    232.                 if (e.preventDefault) e.preventDefault();
    233.                 self.wheelDelta = e.detail * 10;
    234.                 self.setup.wheel && self.setup.wheel(e);
    235.                 return false;
    236.         }, false);
    237.         this.elem.onmousewheel = function () {
    238.                 self.wheelDelta = -event.wheelDelta * .25;
    239.                 self.setup.wheel && self.setup.wheel(event);
    240.                 return false;
    241.         }
    242. }

    244. // ===== request animation frame =====
    245. window.requestAnimFrame = (function(){
    246.                 return  window.requestAnimationFrame ||
    247.                 window.webkitRequestAnimationFrame   ||
    248.                 window.mozRequestAnimationFrame      ||
    249.                 window.oRequestAnimationFrame        ||
    250.                 window.msRequestAnimationFrame       ||
    251.                 function( run ){
    252.                         window.setTimeout(run, 16);
    253.                 };
    254. })();
    复制代码
    到此这篇关于HTML+CSS+JavaScript实现图片3D展览的示例代码的文章就介绍到这了,更多相关HTML图片3D展览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/747978.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表