canvas极速3D立体式图片相册切换效果

最新推荐文章于 2024-05-03 21:58:26 发布
最新推荐文章于 2024-05-03 21:58:26 发布
阅读量3.9k 收藏 6
点赞数 6
分类专栏： web前端
canvas极速3D立体式图片相册切换效果
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>极速3D立体式图片相册切换效果</title> 
<style type="text/css">
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="js/ge1doot.js"></script>
<script type="text/javascript">
"use strict";
(function () {
  var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],
 Poly = function (parent, face) {
  this.parent = parent;
  this.ctx    = ctx;
  this.color  = face.fill || false;
  this.points = [];
  if (!face.img) {
      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 = function (path, img, structure) {
    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;
    this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
    this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
  this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
   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 = function (json) {
    Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
    scr = new ge1doot.Screen({
   container: "canvas"
  });
  ctx = scr.ctx;
  scr.resize();
    pointer = new ge1doot.Pointer({
   tap: function () {
    if (camera.over) {
     if (camera.over === camera.target.elem) {
           camera.target.x = 0;
      camera.target.z = 0;
      camera.target.elem = false;
     } else {
      camera.target.elem = camera.over;
      camera.target.x = camera.over.tx;
      camera.target.z = camera.over.tz;
      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);
      }
     }
    }
   }
  });
   camera = new ge1doot.transform3D.Camera({
   focalLength: Math.sqrt(scr.width) * 10,
   easeTranslation: 0.025,
   easeRotation: 0.06,
   disableRz: true
  }, {
   move: function () {
    this.over = false;
    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;
  for (var i = 0, img; img = json.imgdata[i++];) {
   diapo.push(
    new Diapo(
     json.options.imagesPath, 
     img, 
     json.structure
    )
   );
  } 
      setInterval(function() {
   quality = (fps > 50) ? [2,3] : [1,2];
   fps = 0;
  }, 1000);
  run();
 },
 run = function () {
  ctx.clearRect(0, 0, scr.width, scr.height);
  camera.move();
  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());
   }
  }
  if (camera.over && !pointer.isDraging) {
   scr.setCursor("pointer");
  } else {
   scr.setCursor("move");
  }
  fps++;
  requestAnimFrame(run);
 };
 Poly.prototype.draw = function () {
    var c = this.color;
  if (c.light || !light) {
   var s = c.light ? this.parent.light : 1;
      light = "rgba(" + 
    Math.round(c.r * s) + "," +
    Math.round(c.g * s) + "," + 
    Math.round(c.b * s) + "," + (c.a || 1) + ")";
   ctx.fillStyle = light;
  }
    if (!c.light || this.parent.light < 1) {
    for (
    var i = 0; 
    this.points[i++].projection();
   );
   this.drawPoly();
   ctx.fill();
  }
 }
  Diapo.prototype.loaded = function (img) {
  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])
   );
  }
 }
  Diapo.prototype.draw = function () {
   this.pc.projection();
  if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
   this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
   this.visible = true;
   this.img.draw();
    if (pointer.hasMoved || pointer.isDown) {
    if (
     this.img.isPointerInside(
      pointer.X,
      pointer.Y
     )
    ) camera.over = this;
   }
  } else this.visible = false;
  return true;
 }
 return {
   load : function (data) {
   window.addEventListener('load', function () {
    ge1doot.loadJS(
     "js/imageTransform3D.js",
     init, data
    );
   }, false);
  }
 }
})().load({
 imgdata:[
  {img:'images/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
  {img:'images/2.jpg', x:0,     y:0, z:1500, nx:0, nz:1},
  {img:'images/3.jpg', x:1000,  y:0, z:1500, nx:0, nz:1},
  {img:'images/4.jpg', x:1500,  y:0, z:1000, nx:-1, nz:0},
  {img:'images/5.jpg', x:1500,  y:0, z:0, nx:-1, nz:0},
  {img:'images/6.jpg', x:1500,  y:0, z:-1000, nx:-1, nz:0},
  {img:'images/7.jpg', x:1000,  y:0, z:-1500, nx:0, nz:-1},
  {img:'images/8.jpg', x:0,     y:0, z:-1500, nx:0, nz:-1},
  {img:'images/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
  {img:'images/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
  {img:'images/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
  {img:'images/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}
 ],
 structure:[
  {
   fill: {r:255, g:255, b:255, light:1},
   x: [-1001,-490,-490,-1001],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [-501,2,2,-500],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [0,502,502,0],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   fill: {r:255, g:255, b:255, light:1},
   x: [490,1002,1002,490],
   z: [-500,-500,-500,-500],
   y: [500,500,-500,-500]
  },{
   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]
  },{
   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]
  },{
   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]
  },{
   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]
  },{
   fill: {r:32, g:32, b:32},
   x: [-50,50,50,-50],
   z: [-150,-150,-50,-50],
   y: [-500,-500,-500,-500]
  },{
   fill: {r:16, g:16, b:16},
   x: [-10,10,10,-10],
   z: [-100,-100,-100,-100],
   y: [300,300,-500,-500]
  },{
   fill: {r:255, g:255, b:255},
   x: [-320,-320,-320,-320],
   z: [0,-20,-20,0],
   y: [-190,-190,190,190]
  },{
   fill: {r:255, g:255, b:255},
   x: [320,320,320,320],
   z: [0,-20,-20,0],
   y: [-190,-190,190,190]
  },
  {img:true},
  {
   fill: {r:255, g:128, b:0},
   x: [-50,50,50,-50],
   z: [450,450,550,550],
   y: [500,500,500,500]
  },{
   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>
</head> 
<body>
<canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>
</body>
</html>

图片

图片

图片

图片

图片

图片

图片

图片
想旅游咯
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
ym——android源码大放送（实战开发必备）
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
html5 css3 3D立体式图片相册切换
11-03
在实际应用中，这样的3D立体式图片相册切换效果不仅可以用于个人网站展示照片，还可以在电子商务网站中作为产品展示，甚至在艺术展览或多媒体项目中增加互动性。通过HTML5和CSS3的组合，开发者可以创建出更具创新性...
canvas星空背景特效+CSS旋转相册学习
林恒的博客
09-14 311
今天在看帖子的时候，看到了个有趣的css旋转相册，刚好之前做了一个星空背景dome，这里给大家分享下代码： 旋转相册参考：https://blog.csdn.net/gitchatxiaomi/article/details/108474015?utm_medium=distribute.pc_category.none-task-blog-hot-7.nonecase dome下载地址...
html3D创意相册附源码_html相册源码(2)
2401_84419009的博客
04-28 1232
})().load({ imgdata:[ // north {img:‘imgs/1.jpg’, x:-1000, y:0, z:1500, nx:0, nz:1}, {img:‘imgs/2.jpg’, x:0, y:0, z:1500, nx:0, nz:1}, {img:‘imgs/3.jpg’, x:1000, y:0, z:1500, nx:0, nz:1}, // east {img:‘imgs/4.jpg’, x:1500, y:0, z:1000, nx:-1, nz:0},
2015最新安卓例子自定义控件等分类源码免费下载
hotmail589
12-13 1万+
源码的下载地址时http://yunpan.cn/cjwwij3FcBtZV 访问密码3579 本列表源码永久免费下载地址http://www.javaapk.com/demo  卷 yunpan 的文件夹 PATH 列表 卷序列号为 0000-73EC E:. │  javaapk.com文件列表生成.bat │  例子大全说明.txt │  本例子永久更新地址~.url │
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 13万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
Android源码大放送（实战开发必备）
gao_chun
08-01 3万+
Android源码大放送（实战开发必备）文件夹 PATH 列表│  javaapk.com文件列表生成工具.bat│  使用说明.txt│  免费下载更多源码.url│  目录列表.txt│  ├─android web应用│      jqmDemo_static.zip│      jqmMobileDemo-master.zip│      jqmMobileDemo1_1-master.z
[转]2014年最新810多套android源码2.46GB免费一次性打包下载
KrocLin android学习笔记
11-05 7520
之前发过一个帖子，但是那个帖子有点问题我就重新发一个吧，下面的源码是我从今年3月份开始不断整理源码区和其他网站上的安卓例子源码，目前总共有810套左右，根据实现的功能被我分成了100多个类，总共接近2.5G，还在不断更新。初学者可以快速方便的找到自己想要的例子，大神也可以看一下别人的方法实现。虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的，但是既然这些例子是来自于社区那就让他们免费回归社区
Android源码大放送（实战开发必备）(3)
2401_84411249的博客
05-01 865
【Android 详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。
Android源码大放送（实战开发必备）(2)
2401_84132628的博客
05-03 858
│ 在android学习中，动作交互是软件中重要的一部分，其中的Scroller就是提供了拖动效果的类，在网上，比如说一些Launcher实现滑屏都可以通过这个类去实现。│ 在android 软件第一次使用的时候，一般会在当前的界面上做一个灰色的蒙版，上面有显示的一些提醒性质的教学文字或者图案。│ java 对apk 文件进行伪加密，然后进行字节码变换的工具，可运行的源代码，其中的apk的目录，需要自己修改成，你的自己的目录。如果你看到了这里，觉得文章写得不错就给个赞呗？
html5 3D立体式图片相册
05-26
【HTML5 3D立体式图片相册】是一种利用现代Web技术实现的创新展示方式，主要依赖于HTML5的新特性，尤其是Canvas元素和JavaScript的强大功能。这种相册设计旨在为用户带来更生动、更具交互性的浏览体验，尤其适用于...
WPF Canvas 效果 3D 立体发光效果 DNA 卷动
05-12
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现一个令人惊叹的3D立体发光效果，特别是以DNA卷动为主题的视觉特效。WPF是微软为.NET Framework开发的用户界面框架，它提供了丰富的功能...
HTML5 3D立体图片相册
11-03
HTML5 3D立体图片相册是一种利用现代Web技术实现的创新展示方式，它结合了HTML5的强大功能和3D视觉效果，为用户提供了一种全新的浏览和交互体验。这种技术通常用于网页设计、产品展示、在线画廊等领域，能够使网站...
WPF Canvas 效果 3D 立体发光效果 粒子波特效
05-12
在本文中，我们将深入探讨如何在Windows Presentation Foundation (WPF) 中实现3D立体发光效果以及粒子波特效，这两种效果都是在Canvas元素上创建的。WPF作为一个强大的UI框架，提供了丰富的3D图形和动画功能，使...
pillow_heif-0.17.0-pp39-pypy39_pp73-macosx_14_0_arm64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
cykooz.resizer-3.0.0-cp310-cp310-macosx_11_0_arm64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]Delphi题库管理与试卷自动生成系统.zip
最新发布
07-27
[毕设]Delphi题库管理与试卷自动生成系统
HTML5 Canvas实现生动3D衣摆动画教程
HTML5 3D衣服摇摆动画特效是一种创新的Web开发应用，它展示了HTML5 Canvas的强大功能，允许网页动态地呈现出立体的视觉效果。通过结合HTML、CSS和JavaScript，开发者可以实现交互式的体验，例如，当鼠标滑过或点击...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值