3D HTML5 logo logo super cool spin effect

Today will bring you a cool HTML5 Canvas 3D Animation special effects, is a rotating HTML5 logo logo. The screen has a total of two rotatable areas, the first is rotatable background, the second is the logo logo can be rotated. Logo logo in the rotation and the visual effects of the canvas, all of which we are in the implementation of the. The specific presentation 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, mainly composed of HTML code and JavaScript code.

HTML code:

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

Very simple, just construct a canvas container, the next 3D animation, including the rotation of the effects will be drawn and implemented here.

JavaScript code:

function Onloadhandler () {   var canvas = document.getElementById ("canvas");    canvas.width = Windo
W.innerwidth;
   canvas.height = window.innerheight;    var k3dmain = new K3d.
Controller (canvas, true);      //Generate 3D Objects       var obj1 = new K3d.
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:-          [],          [{ 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);       var obj2 = new K3d.
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);       var obj3 = new K3d.
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);       var obj4 = new K3d.
K3dobject ();    with (OBJ4)    {      DrawMode = "solid";     &nbsP
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);       var objbase = new K3d.
K3dobject ();    with (objbase)    {      DrawMode = "solid";     & nbsp
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);       var objhtml = new K3d.
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    var ctx = Canvas.getcontext ("2d");
   var rotationoffset = 0;
   var len = (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 goodies       ctx.clearrect (0, 0, CANvas.width, Canvas.height);            //Draw BG effect before K3d does its 3D rendering  &N
bsp;    Ctx.save ();
      ctx.translate (CANVAS.WIDTH/2, CANVAS.HEIGHT/2);
      ctx.rotate (Rotationoffset);            //Pass-outer rays     & nbsp
var raycount = 24;
      Ctx.fillstyle = "#eee";
      Ctx.beginpath ();       for (var i=0 i<raycount; i++)       {   & nbsp;    //Rotate Context          ctx.rotate (Twopi/
Raycount);
         Ctx.moveto (0, 0);
         Ctx.lineto ( -20, Len);         
Ctx.lineto (len);
     }       Ctx.closepath ();
      Ctx.fill ();
     //Second fill Pass-inner rays       ctx.fillstyle = "#fff";
      Ctx.beginpath ();       for (var i=0 i<raycount; i++)       {   & nbsp;    //Rotate Context          ctx.rotate (Twopi/
Raycount);
         Ctx.moveto (0, 0);
         Ctx.lineto ( -15, Len);
         Ctx.lineto (len);
     }       Ctx.closepath ();
      Ctx.fill ();
      Ctx.restore ();
      Rotationoffset + 0.005;            //apply user interaction to rotation     & nbsp For (Var i=0, objs=k3dmain.objects i<objs.length; i++)       {    &
nbsp;    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 loop    k3dmain.paused = true;
   setinterval (function () {K3dmain.tick ()}, 1000/60); }

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

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

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

function Ondocumentmousedown (event) {    event.preventdefault ();       &nbs P
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; function Ondocumentmousemove (event) {    mousex = event.clientx-windowhalfx;     tar
Getrotationx = Targetrotationonmousedownx + (mousex-mousexonmousedown) * 0.02;
    mousey = Event.clienty-windowhalfy;     Targetrotationy = Targetrotationonmousedowny + (mousey-mouseyonmousedown) * 0.02; function Ondocumentmouseup (event) {    Document.removeeventlistener ("MouseMove"),
Ondocumentmousemove, false);
    Document.removeeventlistener ("MouseUp", Ondocumentmouseup, false);
    Document.removeeventlistener ("Mouseout", Ondocumentmouseout, false); function Ondocumentmouseout (event) {    Document.removeeventlistener ("MouseMove"),
Ondocumentmousemove, false);
    Document.removeeventlistener ("MouseUp", Ondocumentmouseup, false);
    Document.removeeventlistener ("Mouseout", Ondocumentmouseout, false); function Ondocumenttouchstart (event) {    if (event.touches.length = 1)     { &

nbsp;      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 little complicated to implement, you can download the source code to study and learn. SOURCE Download >>