多视角3D可旋转的HTML5标志动画

1、多视角3d可旋转的html5标志动画这是一款基于html5和css3的3d动画特效，与之前的3d特效不同的是，这款是彻低用html5特性实现的，而并非用多张叠加起来。这款3d动画还有一个特点是可以无限的旋转，从而可以从多个视角来观看html5徽标。 在线演示 原始码下载html代码xml / html代码将内容复制到文本 javascript代码javascript代码将内容复制到/绑定到窗口onload处理程序window.addeventlistener（&39;load&39; ，onloadhandler， false ）; / * *窗口加载处理程序 * / 函数 o

2、nloadhandler（） var canvas = document.getelementbyid（&39;canvas&39; ）; canvas.width = window.innerwidth; canvas.height = window.innerheight; var k3dmain = new k3d.controller（canvas， true ）; /生成3d对象 var obj1 = new k3d.k3dobject（）; 与 （obj1） drawmode = solid ; shademode = lightsource ; sortmode

3、= 未排序 ; addphi = -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

4、：-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）; var obj2 = new k3d.k3dobject（）; 与 （obj2） drawmode = solid ; shademode = lightsource ; sortmode = 未排序 ; addphi

5、 = -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：

6、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）; var obj3 = new k3d.k3dobject（）; 与 （obj3） drawmode = solid ; shademode = ligh

7、tsource ; sortmode = 未排序 ; addphi = -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：5

8、8，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）; var obj4 = new k3d.k3dobject（）; 与 （obj4） drawmode = solid ; shademode = lightsource ; sortmode = 未排序 ; addphi = -0.5

9、; 大约= -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

10、： -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）; var objbase = new k3d.k3dobject（）; 与 （objbase） drawmode = solid ; shademode = lightsource ;

11、 sortmode = 未排序 ; addphi = -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）; var objhtml = 新的 k3d.k3dobject（）; 与 （objhtml） drawmode = solid ; shademode = lightsource ; /

12、sortmode = unsorted; 色彩= 64,64,64; 双面= 真; addphi = -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：-

13、 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：

14、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， ， vertices：0,1,2,3,4,5,6,7,8,9,10,11,0 , vertices：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）; /添加渲染循环回调 var ctx = canvas.getcontext（&39;2d&39; ）;

15、var rotationoffset = 0; var len =（canvas.height> canvas.width？canvas.height：canvas.width）* 0.7; k3dmain.clearbackground = false ; k3dmain.callback = 函数（） /手动清除bg-由于我们要渲染一些额外的东西 ctx.clearrect（0，0，canvas.width，canvas.height）; /在k3d举行3d渲染之前绘制bg效果 ctx.save（）; ctx.translate（canvas.width / 2，canvas.hei

16、ght / 2）; ctx.rotate（rotationoffset）; /第一次填充-外部光芒 var raycount = 24; ctx.fillstyle = eee ; ctx.beginpath（）; 对于 （var i = 0; i -0.5）targetrotationx-= 0.05; 否则假如 （targetrotationx -0.55 &amp;&amp; targetrotationx <-0.5）targetrotationx = -0.5; ; /开头演示循环 k3dmain.paused = true ; setinterval（func

17、tion （）k3dmain.tick（），1000/60）； /从doob先生var targetrotationx = 0;var targetrotationonmousedownx = 0;var mousex = 0;var mousexonmousedown = 0;var targetrotationy = 0;var targetrotationonmousedowny = 0;var mousey = 0;var mouseyonmousedown = 0; var windowhalfx = window.innerwidth / 2;var windowhalfy = w

18、indow.innerheight / 2; document.addeventlistener（&39;mousedown&39; ，ondocumentmousedown， false ）;document.addeventlistener（&39;touchstart&39; ，ondocumenttouchstart， false ）;document.addeventlistener（&39;touchmove&39; ，ondocumenttouchmove， false ）; 函数 ondocumentmousedown（event

19、） event.preventdefault（）; document.addeventlistener（&39;mousemove&39; ，ondocumentmousemove， false ）; document.addeventlistener（&39;mouseup&39; ，ondocumentmouseup， false ）; document.addeventlistener（&39;mouseout&39; ，ondocumentmouseout， false ）; mousexonmousedown = event.clien

20、tx-windowhalfx; targetrotationonmousedownx = targetrotationx; mouseyonmousedown = event.clienty-windowhalfy; targetrotationonmousedowny = targetrotationy; 函数 ondocumentmousemove（event） mousex = event.clientx-windowhalfx; targetrotationx = targetrotationonmousedownx +（mousex-mousexonmousedown）* 0.02;

21、 mousey = event.clienty-windowhalfy; targetrotationy = targetrotationonmousedowny +（mousey-mouseyonmousedown）* 0.02; 函数 ondocumentmouseup（event） document.removeeventlistener（&39;mousemove&39; ，ondocumentmousemove， false ）; document.removeeventlistener（&39;mouseup&39; ，ondocumentmouse

22、up， false ）; document.removeeventlistener（&39;mouseout&39; ，ondocumentmouseout， false ）; 函数 ondocumentmouseout（event） document.removeeventlistener（&39;mousemove&39; ，ondocumentmousemove， false ）; document.removeeventlistener（&39;mouseup&39; ，ondocumentmouseup， false ）; document.rem