多視角3D可旋轉(zhuǎn)的HTML5標(biāo)志動畫

1、多視角3d可旋轉(zhuǎn)的html5標(biāo)志動畫這是一款基于html5和css3的3d動畫特效，與之前的3d特效不同的是，這款是徹低用html5特性實(shí)現(xiàn)的，而并非用多張疊加起來。這款3d動畫還有一個(gè)特點(diǎn)是可以無限的旋轉(zhuǎn)，從而可以從多個(gè)視角來觀看html5徽標(biāo)。 在線演示 原始碼下載html代碼xml / html代碼將內(nèi)容復(fù)制到文本 javascript代碼javascript代碼將內(nèi)容復(fù)制到/綁定到窗口onload處理程序window.addeventlistener（&39;load&39; ，onloadhandler， false ）; / * *窗口加載處理程序 * / 函數(shù) 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，頂點(diǎn)：0,1,2,3,0，色彩：235,235,235，頂點(diǎn)：4,5,6,7,8,9,10 ，11,4，色彩：235,235,235，頂點(diǎn)：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，頂點(diǎn)：0,1,2,3,0，色彩：240,101,41，頂點(diǎn)：4,5,6,7,4 ，色彩：235,235,235，頂點(diǎn)：8,9,10,11,8，色彩：235,235,235，頂點(diǎn)：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，頂點(diǎn)：0,1,2,3,0，色彩：235,235,235，頂點(diǎn)：4,5,6,7,8,9,10 ，11,4，色彩：235,235,235，頂點(diǎn)：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，頂點(diǎn)：0,1,2,3,0，色彩：240,101,41，頂點(diǎn)：4,5,6,7,4 ，色彩：235,235,235，頂點(diǎn)：8,9,10,11,8，色彩：235,235,235，頂點(diǎn)：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，頂點(diǎn)：0,2,1,0，色彩：227,76,38，頂點(diǎn)：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，頂點(diǎn)：20,21,22,23,24,25,26,27,28,29,30,31,20，頂點(diǎn)：32,33,34,35 ，36,37,32 ）; k3dmain.addk3dobject（objhtml）; /添加渲染循環(huán)回調(diào) 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 = 函數(shù)（） /手動清除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; ; /開頭演示循環(huán) 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 ）; 函數(shù) 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; 函數(shù) ondocumentmousemove（event） mousex = event.clientx-windowhalfx; targetrotationx = targetrotationonmousedownx +（mousex-mousexonmousedown）* 0.02;

21、 mousey = event.clienty-windowhalfy; targetrotationy = targetrotationonmousedowny +（mousey-mouseyonmousedown）* 0.02; 函數(shù) 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 ）; 函數(shù) ondocumentmouseout（event） document.removeeventlistener（&39;mousemove&39; ，ondocumentmousemove， false ）; document.removeeventlistener（&39;mouseup&39; ，ondocumentmouseup， false ）; document.rem