{
    分享网正式开通，我们为大家提供免费资源，欢迎大家踊跃投稿！
>网站源码>网站制作>多视角3D可旋转的HTML5 Logo动画

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

网站制作米微资源分享网2022-06-25 10:0919次浏览已收录0个评论扫描二维码

这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <div class="link-overlay">  
  2.   
  3. </div>  
  4. <canvas id="canvas" style="background-color:#ddd"></canvas>  
  5.   

JavaScript代码

JavaScript Code复制内容到剪贴板
  1. // bind to window onload handler   
  2. window.addEventListener('load', onloadHandler, false);   
  3.   
  4.   
  5. function onloadHandler()   
  6. {   
  7.    var canvas = document.getElementById('canvas');   
  8.    canvas.width = window.innerWidth;   
  9.    canvas.height = window.innerHeight;   
  10.    var k3dmain = new K3D.Controller(canvas, true);   
  11.   
  12.    // generate 3D objects   
  13.   
  14.    var obj1 = new K3D.K3DObject();   
  15.    with (obj1)   
  16.    {   
  17.       drawmode = "solid";   
  18.       shademode = "lightsource";   
  19.       sortmode = "unsorted";   
  20.       addphi = -0.5;   
  21.       abouty = -90;   
  22.       perslevel = 1000;   
  23.       init(   
  24.          [{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}],   
  25.          [],   
  26.          [{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]}]   
  27.       );   
  28.    }   
  29.    k3dmain.addK3DObject(obj1);   
  30.   
  31.    var obj2 = new K3D.K3DObject();   
  32.    with (obj2)   
  33.    {   
  34.       drawmode = "solid";   
  35.       shademode = "lightsource";   
  36.       sortmode = "unsorted";   
  37.       addphi = -0.5;   
  38.       abouty = -90;   
  39.       perslevel = 1000;   
  40.       init(   
  41.          [{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}],   
  42.          [],   
  43.          [{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]}]   
  44.       );   
  45.    }   
  46.    k3dmain.addK3DObject(obj2);   
  47.   
  48.    var obj3 = new K3D.K3DObject();   
  49.    with (obj3)   
  50.    {   
  51.       drawmode = "solid";   
  52.       shademode = "lightsource";   
  53.       sortmode = "unsorted";   
  54.       addphi = -0.5;   
  55.       abouty = -90;   
  56.       perslevel = 1000;   
  57.       init(   
  58.          [{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}],   
  59.          [],   
  60.          [{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]}]   
  61.       );   
  62.    }   
  63.    k3dmain.addK3DObject(obj3);   
  64.   
  65.    var obj4 = new K3D.K3DObject();   
  66.    with (obj4)   
  67.    {   
  68.       drawmode = "solid";   
  69.       shademode = "lightsource";   
  70.       sortmode = "unsorted";   
  71.       addphi = -0.5;   
  72.       abouty = -90;   
  73.       perslevel = 1000;   
  74.       init(   
  75.          [{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}],   
  76.          [],   
  77.          [{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]}]   
  78.       );   
  79.    }   
  80.    k3dmain.addK3DObject(obj4);   
  81.   
  82.    var objBase = new K3D.K3DObject();   
  83.    with (objBase)   
  84.    {   
  85.       drawmode = "solid";   
  86.       shademode = "lightsource";   
  87.       sortmode = "unsorted";   
  88.       addphi = -0.5;   
  89.       abouty = -90;   
  90.       perslevel = 1000;   
  91.       init(   
  92.          [{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80,y:20,z:0}],   
  93.          [],   
  94.          [{color:[227,76,38],vertices:[0,2,1,0]},{color:[227,76,38],vertices:[0,3,2,0]}]   
  95.       );   
  96.    }   
  97.    k3dmain.addK3DObject(objBase);   
  98.   
  99.    var objHtml = new K3D.K3DObject();   
  100.    with (objHtml)   
  101.    {   
  102.       drawmode = "solid";   
  103.       shademode = "lightsource";   
  104.       //sortmode = "unsorted";   
  105.       color = [64,64,64];   
  106.       doublesided = true;   
  107.       addphi = -0.5;   
  108.       abouty = 100;   
  109.       scale = 0.75;   
  110.       perslevel = 1000;   
  111.       init(   
  112.          [{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}],   
  113.          [],   
  114.          [{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]}]   
  115.       );   
  116.    }   
  117.    k3dmain.addK3DObject(objHtml);   
  118.   
  119.    // add render loop callback   
  120.    var ctx = canvas.getContext('2d');   
  121.    var rotationOffset = 0;   
  122.    var len = (canvas.height > canvas.width ? canvas.height : canvas.width) * 0.7;   
  123.    k3dmain.clearBackground = false;   
  124.    k3dmain.callback = function()   
  125.    {   
  126.       // manually clear bg - as we want to render some extra goodies   
  127.       ctx.clearRect(0, 0, canvas.width, canvas.height);   
  128.   
  129.       // draw bg effect before K3D does its 3D rendering   
  130.       ctx.save();   
  131.       ctx.translate(canvas.width/2, canvas.height/2);   
  132.       ctx.rotate(rotationOffset);   
  133.   
  134.       // first fill pass - outer rays   
  135.       var RAYCOUNT = 24;   
  136.       ctx.fillStyle = "#eee";   
  137.       ctx.beginPath();   
  138.       for (var i=0; i<RAYCOUNT; i++)   
  139.       {   
  140.          // rotate context   
  141.          ctx.rotate(TWOPI / RAYCOUNT);   
  142.          ctx.moveTo(0, 0);   
  143.          ctx.lineTo(-20, len);   
  144.          ctx.lineTo(20, len);   
  145.       }   
  146.       ctx.closePath();   
  147.       ctx.fill();   
  148.       // second fill pass - inner rays   
  149.       ctx.fillStyle = "#fff";   
  150.       ctx.beginPath();   
  151.       for (var i=0; i<RAYCOUNT; i++)   
  152.       {   
  153.          // rotate context   
  154.          ctx.rotate(TWOPI / RAYCOUNT);   
  155.          ctx.moveTo(0, 0);   
  156.          ctx.lineTo(-15, len);   
  157.          ctx.lineTo(15, len);   
  158.       }   
  159.       ctx.closePath();   
  160.       ctx.fill();   
  161.       ctx.restore();   
  162.       rotationOffset += 0.005;   
  163.   
  164.       // apply user interaction to rotation   
  165.       for (var i=0, objs=k3dmain.objects; i<objs.length; i++)   
  166.       {   
  167.          objs[i].ophi += targetRotationX;   
  168.       }   
  169.   
  170.       if (targetRotationX > -0.5) targetRotationX -= 0.05;   
  171.       else if (targetRotationX < -0.55) targetRotationX += 0.05;   
  172.       if (targetRotationX > -0.55 && targetRotationX < -0.5) targetRotationX = -0.5;   
  173.    };   
  174.   
  175.    // start demo loop   
  176.    k3dmain.paused = true;   
  177.    setInterval(function(){k3dmain.tick()}, 1000/60);   
  178. }   
  179.   
  180. // nifty drag/touch event capture code borrowed from Mr Doob http://mrdoob.com/   
  181. var targetRotationX = 0;   
  182. var targetRotationOnMouseDownX = 0;   
  183. var mouseX = 0;   
  184. var mouseXOnMouseDown = 0;   
  185. var targetRotationY = 0;   
  186. var targetRotationOnMouseDownY = 0;   
  187. var mouseY = 0;   
  188. var mouseYOnMouseDown = 0;   
  189.   
  190. var windowHalfX = window.innerWidth / 2;   
  191. var windowHalfY = window.innerHeight / 2;   
  192.   
  193. document.addEventListener('mousedown', onDocumentMouseDown, false);   
  194. document.addEventListener('touchstart', onDocumentTouchStart, false);   
  195. document.addEventListener('touchmove', onDocumentTouchMove, false);   
  196.   
  197. function onDocumentMouseDown( event ) {   
  198.   
  199.  event.preventDefault();   
  200.   
  201.  document.addEventListener('mousemove', onDocumentMouseMove, false);   
  202.  document.addEventListener('mouseup', onDocumentMouseUp, false);   
  203.  document.addEventListener('mouseout', onDocumentMouseOut, false);   
  204.   
  205.  mouseXOnMouseDown = event.clientX - windowHalfX;   
  206.  targetRotationOnMouseDownX = targetRotationX;   
  207.  mouseYOnMouseDown = event.clientY - windowHalfY;   
  208.  targetRotationOnMouseDownY = targetRotationY;   
  209. }   
  210.   
  211. function onDocumentMouseMove( event )   
  212. {   
  213.  mouseX = event.clientX - windowHalfX;   
  214.  targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;   
  215.  mouseY = event.clientY - windowHalfY;   
  216.  targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;   
  217. }   
  218.   
  219. function onDocumentMouseUp( event )   
  220. {   
  221.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
  222.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
  223.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
  224. }   
  225.   
  226. function onDocumentMouseOut( event )   
  227. {   
  228.  document.removeEventListener('mousemove', onDocumentMouseMove, false);   
  229.  document.removeEventListener('mouseup', onDocumentMouseUp, false);   
  230.  document.removeEventListener('mouseout', onDocumentMouseOut, false);   
  231. }   
  232.   
  233. function onDocumentTouchStart( event )   
  234. {   
  235.  if (event.touches.length == 1)   
  236.  {   
  237.   event.preventDefault();   
  238.   
  239.   mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;   
  240.   targetRotationOnMouseDownX = targetRotationX;   
  241.   mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;   
  242.   targetRotationOnMouseDownY = targetRotationY;   
  243.  }   
  244. }   
  245.   
  246. function onDocumentTouchMove( event )   
  247. {   
  248.  if (event.touches.length == 1)   
  249.  {   
  250.   event.preventDefault();   
  251.   
  252.   mouseX = event.touches[0].pageX - windowHalfX;   
  253.   targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.05;   
  254.   mouseY = event.touches[0].pageY - windowHalfY;   
  255.   targetRotationY = targetRotationOnMouseDownY + (mouseX - mouseYOnMouseDown) * 0.05;   
  256.  }   
  257. }   

以上就是本文的全部内容，希望对大家的学习有所帮助。


套路很深，不支持下载！

米微资源分享网 , 版权所有丨本站资源仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：多视角3D可旋转的HTML5 Logo动画
喜欢 ()赏分享 (0)