3D HTML5 logo logo super cool spin effect

Today will bring you a cool HTML5 Canvas 3D animation effect, is a rotatable HTML5 logo logo. On the screen there are two pieces of rotatable area, the first is a rotatable background, the second is a rotatable logo logo. Logo logo in the rotation of the time also has a visual effect, all of which we are in the canvas to achieve. The specific demonstration and implementation process can be seen below.

You can also view the online demo here

Let's briefly analyze the process of implementing this 3D animation and some of its core code, consisting mainly of HTML code and JavaScript code.

HTML code:

<id= "Canvas"  style= "Background-color: #ddd"></  canvas>

It is very simple to construct a canvas container, and the next 3D animation, including the effects of rotation, will be drawn and implemented here.

JavaScript code:

functionOnloadhandler () {varCanvas = document.getElementById (' Canvas '); Canvas.width=window.innerwidth; Canvas.height=Window.innerheight; varK3dmain =NewK3d. Controller (Canvas,true); //Generate 3D Objects      varObj1 =NewK3d.   K3dobject ();  with(obj1) {DrawMode= "SOLID"; Shademode= "LightSource"; SortMode= "Unsorted"; Addphi=-0.5; Abouty=-90; Perslevel= 1000; Init ([{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}], [], [{color:[227,76,38],VERTICES:[0,1,2,3,0]},{COLOR:[235,235,235],VERTICES:[4,5,6,7,8,9,10,11,4]},{COLOR:[235,235,235], vertices:[12,13,14,15,16,17,12]}]      );      } k3dmain.addk3dobject (OBJ1); varObj2 =NewK3d.   K3dobject ();  with(obj2) {DrawMode= "SOLID"; Shademode= "LightSource"; SortMode= "Unsorted"; Addphi=-0.5; Abouty=-90; Perslevel= 1000; Init ([{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}], [], [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[ 8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]      );      } k3dmain.addk3dobject (OBJ2); varObj3 =NewK3d.   K3dobject ();  with(obj3) {DrawMode= "SOLID"; Shademode= "LightSource"; SortMode= "Unsorted"; Addphi=-0.5; Abouty=-90; Perslevel= 1000; Init ([{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}], [], [{color:[227,76,38],VERTICES:[0,1,2,3,0]},{COLOR:[235,235,235],VERTICES:[4,5,6,7,8,9,10,11,4]},{COLOR:[235,235,235], vertices:[12,13,14,15,16,17,12]}]      );      } k3dmain.addk3dobject (OBJ3); varObj4 =NewK3d.   K3dobject ();  with(OBJ4) {DrawMode= "SOLID"; Shademode= "LightSource"; SortMode= "Unsorted"; Addphi=-0.5; Abouty=-90; Perslevel= 1000; Init ([{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}], [], [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[240,101,41],vertices:[4,5,6,7,4]},{color:[235,235,235],vertices:[ 8,9,10,11,8]},{color:[235,235,235],vertices:[12,13,14,15,16,17,18,19,12]}]      );      } k3dmain.addk3dobject (OBJ4); varObjbase =NewK3d.   K3dobject ();  with(objbase) {DrawMode= "SOLID"; Shademode= "LightSource"; SortMode= "Unsorted"; Addphi=-0.5; Abouty=-90; Perslevel= 1000; Init ([{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80,y:20,z:0}], [], [{color:[227,76,38],vertices:[0,2,1,0]},{color:[227,76,38],vertices:[0,3,2,0]}]      );      } k3dmain.addk3dobject (Objbase); varobjhtml =NewK3d.   K3dobject ();  with(objhtml) {DrawMode= "SOLID"; Shademode= "LightSource"; //SortMode = "unsorted";color = [64,64,64]; doublesided=true; Addphi=-0.5; Abouty= 100; Scale= 0.75; Perslevel= 1000; Init ([{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}], [], [{vertices:[0,1,2,3,4,5,6,7,8,9,10,11,0]},{vertices:[12,13,14,15,16,17,18,19,12]},{vertices:[ 20,21,22,23,24,25,26,27,28,29,30,31,20]},{vertices:[32,33,34,35,36,37,32]}]      );      } k3dmain.addk3dobject (objhtml); //Add render Loop callback   varCTX = Canvas.getcontext (' 2d '); varRotationoffset = 0; varLen = (Canvas.height > canvas.width? canvas.height:canvas.width) * 0.7; K3dmain.clearbackground=false; K3dmain.callback=function()   {      //manually clear Bg-as we want to render some extra goodiesCtx.clearrect (0, 0, Canvas.width, canvas.height); //draw BG Effect before K3d does its 3D renderingCtx.save (); Ctx.translate (Canvas.width/2, CANVAS.HEIGHT/2);            Ctx.rotate (Rotationoffset); //First fill Pass-outer rays      varRaycount = 24; Ctx.fillstyle= "#eee";      Ctx.beginpath ();  for(vari=0; i<raycount; i++)      {         //Rotate ContextCtx.rotate (Twopi/raycount); Ctx.moveto (0, 0); Ctx.lineto (-20, Len); Ctx.lineto (20, Len);      } ctx.closepath ();      Ctx.fill (); //second fill Pass-inner raysCtx.fillstyle = "#fff";      Ctx.beginpath ();  for(vari=0; i<raycount; i++)      {         //Rotate ContextCtx.rotate (Twopi/raycount); Ctx.moveto (0, 0); Ctx.lineto (-15, Len); Ctx.lineto (15, Len);      } ctx.closepath ();      Ctx.fill ();      Ctx.restore (); Rotationoffset+ = 0.005; //apply user interaction to rotation       for(varI=0, objs=k3dmain.objects; i<objs.length; i++) {Objs[i].ophi+=Targetrotationx; }            if(Targetrotationx > -0.5) Targetrotationx-= 0.05; Else if(Targetrotationx < -0.55) Targetrotationx + = 0.05; if(Targetrotationx > -0.55 && targetrotationx < -0.5) Targetrotationx = 0.5;      }; //Start Demo Loopk3dmain.paused =true; SetInterval (function() {K3dmain.tick ()}, 1000/60);}

This part of the code is the initialization code of the entire animation, where we take advantage of the K3d script library, so you need to reference it in the project, about K3d, you can find it in the final source code.

<src= "K3d-min.js"></script>

Here are some mouse events, you can drag the mouse to let it rotate, the specific code is as follows:

functionOndocumentmousedown (Event) {Event.preventdefault (); Document.addeventlistener (' MouseMove ', Ondocumentmousemove,false); Document.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);}functionOndocumentmouseout (Event) {Document.removeeventlistener (' MouseMove ', Ondocumentmousemove,false); 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; }}

OK, a simple 3D animation is still a bit complicated to implement, you can download the source code to study the learning. SOURCE Download >>