程序员给女朋友用HTML5制作的3D相册资源-CSDN文库

共17个文件

jpg：12个

js：3个

css：1个

5星 · 超过95%的资源需积分: 17 42 浏览量 2014-04-23 09:07:10 上传评论 96 收藏 878KB RAR 举报

HTML5是一种强大的网页开发技术，它为Web开发者提供了丰富的功能和接口，使得创建交互式、动态和富有表现力的网站成为可能。在这个“程序员给女朋友用HTML5制作的3D相册”项目中，我们可以看到HTML5在实现创新用户体验方面的潜力。 3D相册的实现离不开HTML5的Canvas元素。Canvas是HTML5的一个重要组成部分，它提供了一个二维图形绘制接口，通过JavaScript可以动态渲染图形。在这个项目中，程序员利用Canvas API绘制出3D效果，使得相册中的图片可以在多个维度上旋转和展示，增强了视觉效果。 CSS3也是实现3D效果的关键。CSS3引入了3D转换，允许开发者对元素进行旋转、缩放和平移等操作，从而创造出立体感。在这个3D相册中，可能使用了CSS3的transform属性，配合perspective属性来设定视距，使图像看起来具有深度，同时可能还使用了transition属性来实现平滑的动画过渡。此外，WebGL是HTML5的一个扩展，它允许在浏览器中直接进行硬件加速的3D图形渲染。虽然这里没有明确提到使用WebGL，但为了实现更复杂的3D效果，程序员可能也利用了这项技术。WebGL结合JavaScript和OpenGL ES 2.0标准，可以创建出高度互动的3D场景，使得3D相册的体验更加真实。至于“imgs”文件夹，这通常包含了用于3D相册的图片资源。这些图片可能是通过JavaScript动态加载到Canvas或CSS3的背景图中，随着用户的交互而进行显示和变换。图片的加载和处理可能使用了HTML5的File API或者Image对象。这个3D相册项目也展示了HTML5对离线存储的支持。通过AppCache或者Service Worker，开发者可以让用户在没有网络连接时也能访问相册，提高了用户体验。同时，可能还使用了Local Storage或Session Storage来保存用户的一些设置或状态。考虑到这是一个程序员为女朋友制作的项目，很可能还包含了一些个性化和交互性的设计，比如动态的过渡效果、贴心的提示信息，甚至是基于用户行为的定制化展示。这些都体现了HTML5在提升情感交流和用户体验方面的强大能力。这个3D相册项目充分利用了HTML5的多种特性，包括Canvas、CSS3的3D转换、可能的WebGL应用、以及离线存储和本地存储功能，打造了一个富有创意和互动性的3D照片展示平台。对于想要学习HTML5高级特性和应用场景的开发者来说，这是一个非常有价值的参考案例。

资源推荐

资源详情

资源评论

收起资源包目录

3d.rar （17个子文件）

res

jquery-1.7.2.min.js 93KB

ge1doot.js 8KB

imageTransform3D.js 10KB

slider-wb.css 4KB

3d-album.htm 11KB

imgs

8.jpg 63KB

2.jpg 69KB

1.jpg 60KB

6.jpg 73KB

3.jpg 57KB

5.jpg 84KB

11.jpg 75KB

4.jpg 76KB

10.jpg 71KB

12.jpg 62KB

9.jpg 51KB

7.jpg 96KB

<!DOCTYPE HTML>  <!DOCTYPE html PUBLIC "" ""> <HTML> <HEAD> <meta content="IE=11.0000" http-equiv="X-UA-Compatible"> <meta name="Author" content="upload Author http://www.shizaishi.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="keywords" content="canvas,3D,perspective,texturing,gallery"> <link href="res/slider-wb.css" rel="stylesheet"> <title>送给女友的礼物</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 src="res/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( "res/imageTransform3D.js", init, data ); }, false); } } })().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:

评论收藏

内容反馈