素材网 素材网

用HTML5制作3D立体环形照片相册特效

下载资源()次

阅读次数()次

发布时间:2014-05-05

用HTML5制作3D立体环形照片相册特效
分享到:

用法简介:

来源:xw素材网

用HTML5制作3D立体环形照片相册特效。
文件引用:

 // ---- 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(
     "imageTransform3D.js",
     init, data
    );
   }, false);
  }
 }
})().load({
 imgdata:[
  // north
  {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},
  // east
  {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},
  // south
  {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},
  // west
  {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:[
  {
   // 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: ""
 }
});

   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。