多视角3D旋转HTML5Logo动画

时间：2023-04-02 18:55:21 HTML

这是一款基于HTML5和CSS3的3D动画特效。与之前的3D特效不同，这次完全使用HTML5特性实现，而不是多张图片叠加。这个3D动画还有一个特点就是可以无限旋转，这样可以从多个角度观察HTML5Logo。HTML代码

JavaScript代码//绑定到窗口onloadhandlerwindow.addEventListener('load',onloadHandler,false);/***窗口加载处理程序*/functiononloadHandler(){varcanvas=document.getElementById('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;vark3dmain=newK3D.Controller(canvas,true);//生成3D对象varobj1=newK3D.K3DObject();with(obj1){drawmode="solid";shademode="光源";sortmode="未排序";添加phi=-0.5;大约=-90；perslevel=1000;初始化（[{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},{x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},{x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},{x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],[],[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[235,235,235],顶点:[4,5,6,7,8,9,10,11,4]},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,12]}]);}k3dmain.addK3DObject(obj1);varobj2=newK3D.K3DObject();with(obj2){drawmode="solid";shademode="光源";sortmode="未排序";添加phi=-0.5;大约=-90；perslevel=1000;初始化（[{x:0,y:180,z:-80},{x:80,y:180,z:0},{x:80,y:20,z:0},{x:0,y:0,z:-80},{x:0,y:165,z:-80},{x:68,y:165,z:-12},{x:55,y:35,z:-25},{x:0,y:20,z:-80},{x:0,y:150,z:-80},{x:50,y:150,z:-30},{x:47,y:130,z:-33},{x:0,y:130,z:-80},{x:0,y:110,z:-80},{x:45,y:110,z:-35},{x:40,y:50,z:-40},{x:0,y:40,z:-80},{x:0,y:60,z:-80},{x:20,y:66,z:-60},{x:23,y:90,z:-57},{x:0,y:90,z:-80}],[],[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[240,101,41],顶点:[4,5,6,7,4]},{列或：[235,235,235]，顶点：[8,9,10,11,8]}，{颜色：[235,235,235]，顶点：[12,13,14,15,16,17,18,19,12]}]);}k3dmain.addK3DObject(obj2);varobj3=newK3D.K3DObject();with(obj3){drawmode="solid";shademode="光源";sortmode="未排序";添加phi=-0.5;大约=-90；perslevel=1000;初始化([{x:80,y:180,z:0},{x:0,y:180,z:80},{x:0,y:0,z:80},{x:80,y:20,z:0},{x:50,y:150,z:30},{x:0,y:150,z:80},{x:0,y:130,z:80},{x:30,y:130,z:50},{x:28,y:110,z:52},{x:0,y:110,z:80},{x:0,y:90,z:80},{x:45,y:90,z:35},{x:44,y:80,z:36},{x:25,y:80,z:55},{x:22,y:66,z:58},{x:0,y:60,z:80},{x:0,y:40,z:80},{x:40,y:50,z:40}],[],[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[235,235,235],顶点:[4,5,6,7,8,9,10,11,4]},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,12]}]);}k3dmain.addK3DObject(obj3);varobj4=newK3D.K3DObject();with(obj4){drawmode="solid";shademode="光源";sortmode="未排序";添加phi=-0.5;大约=-90；perslevel=1000;初始化（[{x:0,y:180,z:80},{x:-80,y:180,z:0},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:0,y:165,z:80},{x:-68,y:165,z:12},{x:-55,y:35,z:25},{x:0,y:20,z:80},{x:0,y:150,z:80},{x:-50,y:150,z:30},{x:-47,y:130,z:33},{x:0,y:130,z:80},{x:0,y:110,z:80},{x:-45,y:110,z:35},{x:-40,y:50,z:40},{x:0,y:40,z:80},{x:0,y:60,z:80},{x:-20,y:66,z:60},{x:-23,y:90,z:57},{x:0,y:90,z:80}],[],[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[240,101,41],顶点:[4,5,6,7,4]},{颜色:[235,235,235],顶点:[8,9,10,11,8]},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,18,19,12]}]);}k3dmain.addK3DObject(obj4);varobjBase=newK3D.K3DObject();with(objBase){drawmode="solid";shademode="光源";sortmode="未排序";添加phi=-0.5;大约=-90；perslevel=1000;在里面（[{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80,y:20,z:0}],[],[{颜色:[227,76,38],顶点:[0,2,1,0]},{颜色:[227,76,38],顶点:[0,3,2,0]}]);}k3dmain.addK3DObject(objBase);varobjHtml=newK3D.K3DObject();with(objHtml){drawmode="solid";shademode="光源";//排序模式="未排序";颜色=[64,64,64];双面=真；添加phi=-0.5;大约=100；规模=0.75；perslevel=1000;初始化（[{x:-80,y:40,z:0},{x:-70,y:40,z:0},{x:-70,y:30,z:0},{x:-60,y:30,z:0},{x:-60,y:40,z:0},{x:-50,y:40,z:0},{x:-50,y:10,z:0},{x:-60,y:10,z:0},{x:-60,y:20,z:0},{x:-70,y:20,z:0},{x:-70,y:10,z:0},{x:-80,y:10,z:0},{x:-40,y:40,z:0},{x:-10,y:40,z:0},{x:-10,y:30,z:0},{x:-20,y:30,z:0},{x:-20,y:10,z:0},{x:-30,y:10,z:0},{x:-30,y:30,z:0},{x:-40,y:30,z:0},{x:0,y:40,z:0},{x:10,y:40,z:0},{x:20,y:30,z:0},{x:30,y:40,z:0},{x:40,y:40,z:0},{x:40,y:10,z:0},{x:30,y:10,z:0},{x:30,y:30,z:0},{x:20,y:20,z:0},{x:10,y:30,z:0},{x:10,y:10,z:0},{x:0,y:10,z:0},{x:50,y:40,z:0},{x:60,y:40,z:0},{x:60,y:20,z:0},{x:80,y:20,z:0},{x:80,y:10,z:0},{x:50,y:10,z:0}],[],[{顶点:[0,1,2,3,4,5,6,7,8,9,10,11,0]},{顶点:[12,13,14,15,16,17,18,19,12]},{顶点:[20,21,22,23,24,25,26,27,28,29,30,31,20]},{顶点：[32,33,34,35,36,37,32]}]）；}k3dmain.addK3DObject(objHtml);//添加渲染循环回调varctx=canvas.getContext('2d');var旋转偏移=0;varlen=(canvas.height>canvas.width?canvas.height:canvas.width)*0.7;k3dmain.clearBackground=false;k3dmain.callback=function(){//手动清除bg-因为我们想要渲染一些额外的东西ctx.clearRect(0,0,canvas.width,canvas.height);//在K3D进行3D渲染之前绘制背景效果ctx.save();ctx.translate(canvas.width/2,canvas.height/2);ctx.rotate(rotationOffset);//第一个fllpass-外部光线varRAYCOUNT=24;ctx.fillStyle="#eee";ctx.beginPath();for(vari=0;i-0.5)targetRotationX-=0.05;否则如果（目标RotationX<-0.55)targetRotationX+=0.05;如果(targetRotationX>-0.55&&targetRotationX<-0.5)targetRotationX=-0.5;};//开始演示循环k3dmain.paused=true;setInterval(function(){k3dmain.tick()},1000/60);}//从MrDoob那里借用的漂亮的拖动/触摸事件捕获代码http://mrdoob.com/vartargetRotationX=0;vartargetRotationOnMouseDownX=0;varmouseX=0;varmouseXOnMouseDown=0;vartargetRotationY=0;vartargetRotationOnMouseDownY=0;varmouseY=0;varmouseYOnMouseDown=0;varwindowHalfX=window.innerWidth/2;varwindowHalfY=window.innerHeight/2;文档。addEventListener('mousedown',onDocumentMouseDown,false);document.addEventListener('touchstart',onDocumentTouchStart,false);document.addEventListener('touchmove',onDocumentTouchMove,false);函数onDocumentMouseDown(event){event.preventDefault();document.addEventListener('mousemove',onDocumentMouseMove,false);文档.addEventListener('mouseup',onDocumentMouseUp,false);document.addEventListener('mouseout',onDocumentMouseOut,false);mouseXOnMouseDown=event.clientX-windowHalfX;targetRotationOnMouseDownX=targetRotationX;mouseYOnMouseDown=event.clientY-windowHalfY;targetRotationOnMouseDownY=targetRotationY;}functiononDocumentMouseMove(event){mouseX=event.clientX-windowHalfX;targetRotationX=targetRotationOnMouseDownX+(mouseX-mouseXOnMouseDown)*0.02;mouseY=event.clientY-windowHalfY;targetRotationY=targetRotationOnMouseDownY+(mouseY-mouseYOnMouseDown)*0.02;}functiononDocumentMouseUp(event){document.removeEventListener('mousemove',onDocumentMouseMove,false);document.removeEventListener('mouseup',onDocumentMouseUp,false);document.removeEventListener('mouseout',onDocumentMouseOut,false);}函数onDocumentMouseOut(event){document.removeEventListener('mousemove',on文档鼠标移动，假）；document.removeEventListener('mouseup',onDocumentMouseUp,false);document.removeEventListener('mouseout',onDocumentMouseOut,false);}functiononDocumentTouchStart(event){if(event.touches.length==1){event.preventDefault();mouseXOnMouseDown=event.touches[0].pageX-windowHalfX;targetRotationOnMouseDownX=targetRotationX;mouseYOnMouseDown=event.touches[0].pageY-windowHalfY;targetRotationOnMouseDownY=targetRotationY;}}functiononDocumentTouchMove(event){if(event.touches.length==1){event.preventDefault();mouseX=event.touches[0].pageX-windowHalfX;targetRotationX=targetRotationOnMouseDownX+(mouseX-mouseXOnMouseDown)*0.05;mouseY=event.touches[0].pageY-windowHalfY;targetRotationY=targetRotationOnMouseDownY+(mouseX-mouseYOnMouseDown)*0.05;}}web前端开发学习Q-q-u-n：767273102，分享学习的方法以及需要注意的小细节，持续更新最新的教程和学习方法（详解前端项目实战教学视频）

上一篇：前端资源合集下载

下一篇：【前端奶酪树】从浏览器搜索框输入网址到网页呈现，发生了什么？

多视角3D旋转HTML5Logo动画相关文章