html5中如何实现图片3D展览

2024-10-26 技术教程

今天小编给大家分享一下html5中如何实现图片3D展览的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

代码实现

1. HTML代码

<!DOCTYPEHTML><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="HandheldFriendly"content="true"><metaname="description"content="图片3D展览屋"><metaname="keywords"content="canvas,3D_picture,perspective,texturing,gallery"><linkhref="res/slider-wb.css"rel="stylesheet"><title>图片3D展览屋</title><style>html{overflow:visible;-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><scripttype="text/javascript"src="res/ge1doot.js"></script><scripttype="text/javascript">"usestrict";(function(){/*====definitions====*/vardiapo=[],layers=[],ctx,pointer,scr,camera,light,fps=0,quality=[1,2],//----polyconstructor----Poly=function(parent,face){this.parent=parent;this.ctx=ctx;this.color=face.fill||false;this.points=[];if(!face.img){//----createpoints----for(vari=0;i<4;i++){this.points[i]=newge1doot.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;}},//----diapoconstructor----Diapo=function(path,img,structure){//----createimage----this.img=newge1doot.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;//----pointcenter----this.pc=newge1doot.transform3D.Point(img.x,img.y,img.z);//----targetpositions----this.tx=img.x+(img.nx*Math.sqrt(camera.focalLength)*20);this.tz=img.z-(img.nz*Math.sqrt(camera.focalLength)*20);//----createpolygons----this.poly=[];for(vari=-1,p;p=structure[++i];){layers[i]=(p.img===true?1:2);this.poly.push(newPoly(this,p));}},//----initsection----init=function(json){//drawpolyprimitivePoly.prototype.drawPoly=ge1doot.transform3D.drawPoly;//----initscreen----scr=newge1doot.Screen({container:"canvas"});ctx=scr.ctx;scr.resize();//----initpointer----pointer=newge1doot.Pointer({tap:function(){if(camera.over){if(camera.over===camera.target.elem){//----returntothecenter----camera.target.x=0;camera.target.z=0;camera.target.elem=false;}else{//----gotodiapo----camera.target.elem=camera.over;camera.target.x=camera.over.tx;camera.target.z=camera.over.tz;//----adapttesselationleveltodistance----for(vari=0,d;d=diapo[i++];){vardx=camera.target.x-d.pc.x;vardz=camera.target.z-d.pc.z;vardist=Math.sqrt(dx*dx+dz*dz);varlev=(dist>1500)?quality[0]:quality[1];d.img.setLevel(lev);}}}}});//----initcamera----camera=newge1doot.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;//----createimages----for(vari=0,img;img=json.imgdata[i++];){diapo.push(newDiapo(json.options.imagesPath,img,json.structure));}//----startengine---->>>setInterval(function(){quality=(fps>50)?[2,3]:[1,2];fps=0;},1000);run();},//----mainloop----run=function(){//----clearscreen----ctx.clearRect(0,0,scr.width,scr.height);//----camera----camera.move();//----drawlayers----for(vark=-1,l;l=layers[++k];){light=false;for(vari=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(){//----colorlight----varc=this.color;if(c.light||!light){vars=c.light?this.parent.light:1;//----rgbacolor----light="rgba("+Math.round(c.r*s)+","+Math.round(c.g*s)+","+Math.round(c.b*s)+","+(c.a||1)+")";ctx.fillStyle=light;}//----paintpoly----if(!c.light||this.parent.light<1){//----projection----for(vari=0;this.points[i++].projection(););this.drawPoly();ctx.fill();}}/*====imageonload====*/Diapo.prototype.loaded=function(img){//----createpoints----vard=[-1,1,1,-1,1,1,-1,-1];varw=img.texture.width*0.5;varh=img.texture.height*0.5;for(vari=0;i<4;i++){img.points[i]=newge1doot.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]));}}/*====imagesdraw====*/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;//----drawimage----this.visible=true;this.img.draw();//----testpointerinside----if(pointer.hasMoved||pointer.isDown){if(this.img.isPointerInside(pointer.X,pointer.Y))camera.over=this;}}elsethis.visible=false;returntrue;}return{//---loaddata----load:function(data){window.addEventListener('load',function(){ge1doot.loadJS("res/imageTransform3D.js",init,data);},false);}}})().load({imgdata:[//north{img:'imgs/001.jpg',x:-1000,y:0,z:1500,nx:0,nz:1},{img:'imgs/002.jpg',x:0,y:0,z:1500,nx:0,nz:1},{img:'imgs/003.jpg',x:1000,y:0,z:1500,nx:0,nz:1},//east{img:'imgs/004.jpg',x:1500,y:0,z:1000,nx:-1,nz:0},{img:'imgs/005.jpg',x:1500,y:0,z:0,nx:-1,nz:0},{img:'imgs/006.jpg',x:1500,y:0,z:-1000,nx:-1,nz:0},//south{img:'imgs/007.jpg',x:1000,y:0,z:-1500,nx:0,nz:-1},{img:'imgs/008.jpg',x:0,y:0,z:-1500,nx:0,nz:-1},{img:'imgs/009.jpg',x:-1000,y:0,z:-1500,nx:0,nz:-1},//west{img:'imgs/010.jpg',x:-1500,y:0,z:-1000,nx:1,nz:0},{img:'imgs/011.jpg',x:-1500,y:0,z:0,nx:1,nz:0},{img:'imgs/012.jpg',x:-1500,y:0,z:1000,nx:1,nz:0}],structure:[{//wallfill:{r:255,g:255,b:255,light:1},x:[-1001,-490,-490,-1001],z:[-500,-500,-500,-500],y:[500,500,-500,-500]},{//wallfill:{r:255,g:255,b:255,light:1},x:[-501,2,2,-500],z:[-500,-500,-500,-500],y:[500,500,-500,-500]},{//wallfill:{r:255,g:255,b:255,light:1},x:[0,502,502,0],z:[-500,-500,-500,-500],y:[500,500,-500,-500]},{//wallfill:{r:255,g:255,b:255,light:1},x:[490,1002,1002,490],z:[-500,-500,-500,-500],y:[500,500,-500,-500]},{//shadowfill:{r:0,g:0,b:0,a:0.2},x:[-420,420,420,-420],z:[-500,-500,-500,-500],y:[150,150,-320,-320]},{//shadowfill:{r:0,g:0,b:0,a:0.2},x:[-20,20,20,-20],z:[-500,-500,-500,-500],y:[250,250,150,150]},{//shadowfill:{r:0,g:0,b:0,a:0.2},x:[-20,20,20,-20],z:[-500,-500,-500,-500],y:[-320,-320,-500,-500]},{//shadowfill:{r:0,g:0,b:0,a:0.2},x:[-20,20,10,-10],z:[-500,-500,-100,-100],y:[-500,-500,-500,-500]},{//basefill:{r:32,g:32,b:32},x:[-50,50,50,-50],z:[-150,-150,-50,-50],y:[-500,-500,-500,-500]},{//supportfill:{r:16,g:16,b:16},x:[-10,10,10,-10],z:[-100,-100,-100,-100],y:[300,300,-500,-500]},{//framefill:{r:255,g:255,b:255},x:[-320,-320,-320,-320],z:[0,-20,-20,0],y:[-190,-190,190,190]},{//framefill:{r:255,g:255,b:255},x:[320,320,320,320],z:[0,-20,-20,0],y:[-190,-190,190,190]},{img:true},{//ceilingLightfill:{r:255,g:128,b:0},x:[-50,50,50,-50],z:[450,450,550,550],y:[500,500,500,500]},{//groundLightfill:{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><ahref="https://blog.csdn.net/fyfugoyfa/article/details/108845194"target="_blank">CSDN文章</a><br/><canvasid="canvas">建议用谷歌浏览器打开</canvas></body></html>

2. CSS代码

#icon{background:rgb(255,144,0);border-radius:6px0px0px;transition:0.6sease-in-out;left:65px;top:6px;width:40px;height:40px;overflow:hidden;position:relative;cursor:pointer;-moz-transition:all0.6sease-in-out0s;-webkit-transition:all0.6sease-in-out0s;-o-transition:all0.6sease-in-out0s;}#icondiv{background:none;position:absolute;}#icondiv:nth-child(1){border-width:7px0px7px8px;border-style:solid;border-color:transparentrgb(255,255,255);left:20px;top:50%;width:0px;height:0px;margin-top:-7px;position:absolute;}#icondiv:nth-child(2){background:rgb(255,255,255);left:12px;top:50%;width:8px;height:6px;margin-top:-3px;position:absolute;}#nav{top:10px;width:100px;height:0px;position:absolute;-ms-user-select:none;-webkit-user-select:none;-moz-user-select:none;}#nav-switch{display:none;}#nav.label{display:block;cursor:pointer;}#nav.container{transition:left0.3sease-in-out;left:-100px;width:100%;position:absolute;-moz-transition:left0.3sease-in-out0s;-webkit-transition:left0.3sease-in-out0s;-o-transition:left0.3sease-in-out0s;}#nav.container>div{padding:0px;width:50%;float:left;}#nav.container.nav-on{color:rgb(51,51,51);padding-left:0px;}#nav.container.nav-off{width:40px;height:40px;padding-right:10px;}:checked#nav-switch+.label.container{left:10px;}:checked#nav-switch+.label#icon{background:rgb(0,101,203);border-radius:0px0px6px;transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);}.title{margin:0px;padding:0px;left:170px;top:2px;height:40px;color:rgb(51,51,51);line-height:40px;font-family:"SegoeUILight","SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",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;}.menu{margin:0px;padding:0px;left:0px;top:6px;color:rgb(51,51,51);font-family:"SegoeUILight","SegoeUI",Frutiger,"FrutigerLinotype","DejavuSans","HelveticaNeue",Arial,sans-serif;font-size:1em;font-weight:lighter;list-style-type:none;position:relative;cursor:pointer;}.menuli{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;}.menua{color:rgb(51,51,51);line-height:40px;padding-left:40px;text-decoration:none;display:block;position:relative;}.menulia:hover{background:rgb(255,144,0);}.menulia:focus{background:rgb(255,144,0);}.menulia:active{background:rgb(255,144,0);}#navli::before{top:50%;margin-left:10px;position:absolute;content:"";}#navli::after{top:50%;margin-left:10px;position:absolute;content:"";}#navlia::before{top:50%;margin-left:10px;position:absolute;content:"";}#navlia::after{top:50%;margin-left:10px;position:absolute;content:"";}#nav.homea::before{border-width:8px7px;border-style:solid;border-color:transparenttransparentrgb(51,51,51);left:2px;margin-top:-16px;}#nav.homea::after{border-width:3px4px0px;border-style:solid;border-color:rgb(51,51,51)rgb(51,51,51)transparent;left:4px;width:2px;height:4px;margin-top:0px;}#nav.arrowa::before{border-width:7px0px7px8px;border-style:solid;border-color:transparentrgb(51,51,51);left:8px;margin-top:-7px;}#nav.arrowa::after{background:rgb(51,51,51);left:0px;width:8px;height:6px;margin-top:-3px;}#nav.back.arrowa::before{border-width:7px8px7px0px;left:0px;}#nav.back.arrowa::after{left:8px;}#nav.lista::before{background:none;border-width:6px0px;border-style:double;border-color:rgb(51,51,51);left:5px;top:14px;width:12px;height:2px;}#nav.lista::after{background:none;border-width:6px0px;border-style:double;border-color:rgb(51,51,51);left:1px;top:14px;width:2px;height:2px;}

3. JavaScript代码

//=====ge1dootglobal=====js文件1varge1doot=ge1doot||{json:null,screen:null,pointer:null,camera:null,loadJS:function(url,callback,data){if(typeofurl=="string")url=[url];varload=function(src){varscript=document.createElement("script");if(callback){if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;if(--n===0)callback(data||false);}}}else{script.onload=function(){if(--n===0)callback(data||false);}}}script.src=src;document.getElementsByTagName("head")[0].appendChild(script);}for(vari=0,n=url.length;i<n;i++)load(url[i]);}}//=====html/canvascontainer=====ge1doot.Screen=function(setup){ge1doot.screen=this;this.elem=document.getElementById(setup.container)||setup.container;this.ctx=this.elem.tagName=="CANVAS"?this.elem.getContext("2d"):false;this.style=this.elem.style;this.left=0;this.top=0;this.width=0;this.height=0;this.cursor="default";this.setup=setup;this.resize=function(){varo=this.elem;this.width=o.offsetWidth;this.height=o.offsetHeight;for(this.left=0,this.top=0;o!=null;o=o.offsetParent){this.left+=o.offsetLeft;this.top+=o.offsetTop;}if(this.ctx){this.elem.width=this.width;this.elem.height=this.height;}this.setup.resize&&this.setup.resize();}this.setCursor=function(type){if(type!==this.cursor&&'ontouchstart'inwindow===false){this.cursor=type;this.style.cursor=type;}}window.addEventListener('resize',function(){ge1doot.screen.resize();},false);!this.setup.resize&&this.resize();}//====unifiedtoucheventshandler====ge1doot.Pointer=function(setup){ge1doot.pointer=this;varself=this;varbody=document.body;varhtml=document.documentElement;this.setup=setup;this.screen=ge1doot.screen;this.elem=this.screen.elem;this.X=0;this.Y=0;this.Xi=0;this.Yi=0;this.bXi=0;this.bYi=0;this.Xr=0;this.Yr=0;this.startX=0;this.startY=0;this.scale=0;this.wheelDelta=0;this.isDraging=false;this.hasMoved=false;this.isDown=false;this.evt=false;varsX=0;varsY=0;//preventdefaultbehaviorif(setup.tap)this.elem.onclick=function(){returnfalse;}if(!setup.documentMove){document.ontouchmove=function(e){e.preventDefault();}}document.addEventListener("MSHoldVisual",function(e){e.preventDefault();},false);if(typeofthis.elem.style.msTouchAction!='undefined')this.elem.style.msTouchAction="none";this.pointerDown=function(e){if(!this.isDown){if(this.elem.setCapture)this.elem.setCapture();this.isDraging=false;this.hasMoved=false;this.isDown=true;this.evt=e;this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);this.X=sX=this.Xr-this.screen.left;this.Y=sY=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);this.setup.down&&this.setup.down(e);}}this.pointerMove=function(e){this.Xr=(e.clientX!==undefined?e.clientX:e.touches[0].clientX);this.Yr=(e.clientY!==undefined?e.clientY:e.touches[0].clientY);this.X=this.Xr-this.screen.left;this.Y=this.Yr-this.screen.top+((html&&html.scrollTop)||body.scrollTop);if(this.isDown){this.Xi=this.bXi+(this.X-sX);this.Yi=this.bYi-(this.Y-sY);}if(Math.abs(this.X-sX)>11||Math.abs(this.Y-sY)>11){this.hasMoved=true;if(this.isDown){if(!this.isDraging){this.startX=sX;this.startY=sY;this.setup.startDrag&&this.setup.startDrag(e);this.isDraging=true;}else{this.setup.drag&&this.setup.drag(e);}}else{sX=this.X;sY=this.Y;}}this.setup.move&&this.setup.move(e);}this.pointerUp=function(e){this.bXi=this.Xi;this.bYi=this.Yi;if(!this.hasMoved){this.X=sX;this.Y=sY;this.setup.tap&&this.setup.tap(this.evt);}else{this.setup.up&&this.setup.up(this.evt);}this.isDraging=false;this.isDown=false;this.hasMoved=false;this.setup.up&&this.setup.up(this.evt);if(this.elem.releaseCapture)this.elem.releaseCapture();this.evt=false;}this.pointerCancel=function(e){if(this.elem.releaseCapture)this.elem.releaseCapture();this.isDraging=false;this.hasMoved=false;this.isDown=false;this.bXi=this.Xi;this.bYi=this.Yi;sX=0;sY=0;}if('ontouchstart'inwindow){this.elem.ontouchstart=function(e){self.pointerDown(e);returnfalse;}this.elem.ontouchmove=function(e){self.pointerMove(e);returnfalse;}this.elem.ontouchend=function(e){self.pointerUp(e);returnfalse;}this.elem.ontouchcancel=function(e){self.pointerCancel(e);returnfalse;}}document.addEventListener("mousedown",function(e){if(e.target===self.elem||(e.target.parentNode&&e.target.parentNode===self.elem)||(e.target.parentNode.parentNode&&e.target.parentNode.parentNode===self.elem)){if(typeofe.stopPropagation!="undefined"){e.stopPropagation();}else{e.cancelBubble=true;}e.preventDefault();self.pointerDown(e);}},false);document.addEventListener("mousemove",function(e){self.pointerMove(e);},false);document.addEventListener("mouseup",function(e){self.pointerUp(e);},false);document.addEventListener('gesturechange',function(e){e.preventDefault();if(e.scale>1)self.scale=0.1;elseif(e.scale<1)self.scale=-0.1;elseself.scale=0;self.setup.scale&&self.setup.scale(e);returnfalse;},false);if(window.navigator.msPointerEnabled){varnContact=0;varmyGesture=newMSGesture();myGesture.target=this.elem;this.elem.addEventListener("MSPointerDown",function(e){if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){myGesture.addPointer(e.pointerId);nContact++;}},false);this.elem.addEventListener("MSPointerOut",function(e){if(e.pointerType==e.MSPOINTER_TYPE_TOUCH){nContact--;}},false);this.elem.addEventListener("MSGestureHold",function(e){e.preventDefault();},false);this.elem.addEventListener("MSGestureChange",function(e){if(nContact>1){if(e.preventDefault)e.preventDefault();self.scale=e.velocityExpansion;self.setup.scale&&self.setup.scale(e);}returnfalse;},false);}if(window.addEventListener)this.elem.addEventListener('DOMMouseScroll',function(e){if(e.preventDefault)e.preventDefault();self.wheelDelta=e.detail*10;self.setup.wheel&&self.setup.wheel(e);returnfalse;},false);this.elem.onmousewheel=function(){self.wheelDelta=-event.wheelDelta*.25;self.setup.wheel&&self.setup.wheel(event);returnfalse;}}//=====requestanimationframe=====window.requestAnimFrame=(function(){returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(run){window.setTimeout(run,16);};})();

以上就是“html5中如何实现图片3D展览”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。