首頁 > web前端 > H5教程 > 多元視角3D可旋轉的HTML5 Logo動畫_html5教學技巧

多元視角3D可旋轉的HTML5 Logo動畫_html5教學技巧

WBOY
發布: 2016-05-16 15:45:42
原創
1796 人瀏覽過

這是一款基於HTML5和CSS3的3D動畫特效,與之前的3D特效不同的是,這款是完全用HTML5特性實現的,而並非用多張圖片疊加起來。這款3D動畫還有一個特點是可以無限的旋轉,從而可以從多個視角來觀察HTML5 Logo。

線上示範 原始碼下載

HTML程式碼

XML/HTML Code複製內容到剪貼簿
  1. div class=class=class" >>  
  2.   
  3. div>
  4.   
  5. canvas id="canvas" style="background-color:#ddd">canvas>
  6.   
  7.   

JavaScript程式碼
JavaScript Code
複製內容到剪貼簿
  1. //綁定到視窗載入處理程序   
  2. window.addEventListener('load', onloadHandler, false
  3.   
  4. /** 
  5.  * 視窗載入處理程序  
  6.  */  
  7. 函數 onloadHandler()   
  8. {   
  9.    
  10. var canvas = document.getElementById('canvas'    canvas.width = window.innerWidth;   
  11.    canvas.height = window.innerHeight;   
  12.    
  13. var k3dmain =    
  14.  3D.Controller>
  15. );   
  16.   
  17.    
  18. //產生 3D 物件
  19.   
  20.       var
  21.  obj1 = 
  22. new 3D.K3d(3D.K33);    
  23.  (obj1)   
  24.    {          繪圖模式 = 
  25. 「實心」
  26. ;          著色模式 = 
  27. "光源"
  28. ;          sortmode = 
  29. 「未排序」
  30. ;   
  31.       addphi = -0.5;   
  32.       約= -90;   
  33.       每等級 = 1000;   
  34.       init(   
  35.          [{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}],   
  36.          [],   
  37.          [{顏色:[227,76,38],頂點:[0,1,2,3,0]},{顏色:[235,235,235],頂點:[4,5,67 ,8,9,10,11,4]},{顏色:[235,235,235],頂點:[12,13,14,15,16,17,12]}]   
  38.       );       }  
  39.    k3dmain.addK3DObject(obj1);   
  40.   
  41.    var obj2 = new 
  42.    
  43.  (obj2)   
  44.    {   
  45.       繪圖模式 = 
  46. 「實心」;   
  47.       著色模式 = 
  48. "光源";   
  49.       sortmode = 
  50. 「未排序」;   
  51.       addphi = -0.5;   
  52.       約= -90;   
  53.       每等級 = 1000;   
  54.       init(   
  55.          [{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}],   
  56.          [],   
  57.          [{顏色:[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]}]   
  58.       );   
  59.    }   
  60.    k3dmain.addK3DObject(obj2);   
  61.   
  62.    
  63. var obj3 = new 3D.K3D.    
  64.  (obj3)       {   
  65.       繪圖模式 = 
  66. 「實心」
  67. ;          著色模式 = 
  68. "光源"
  69. ;          sortmode = 
  70. 「未排序」
  71. ;          addphi = -0.5;   
  72.       約= -90;   
  73.       每等級 = 1000;   
  74.       init(   
  75.          [{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}],   
  76.          [],   
  77.          [{顏色:[227,76,38],頂點:[0,1,2,3,0]},{顏色:[235,235,235],頂點:[4,5,67 ,8,9,10,11,4]},{顏色:[235,235,235],頂點:[12,13,14,15,16,17,12]}]   
  78.       );   
  79.    }  
  80.    k3dmain.addK3DObject(obj3);   
  81.   
  82.    var obj4 = new 3D.K3D.
  83.    
  84.  (obj4)   
  85.    {   
  86.       繪圖模式 = 
  87. 「實心」;   
  88.       著色模式 = 
  89. "光源";   
  90.       sortmode = 
  91. 「未排序」;   
  92.       addphi = -0.5;   
  93.       約= -90;   
  94.       每等級 = 1000;   
  95.       init(   
  96.          [{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}],   
  97.          [],   
  98.          [{顏色:[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]}]   
  99.       );   
  100.    }   
  101.    k3dmain.addK3DObject(obj4);   
  102.   
  103.    
  104. var objBase = new>    
  105.  (objBase)       {   
  106.       繪圖模式 = 
  107. 「實心」
  108. ;          著色模式 = 
  109. "光源"
  110. ;          sortmode = 
  111. 「未排序」
  112. ;          addphi = -0.5;   
  113.       約= -90;   
  114.       每等級 = 1000;   
  115.       init(   
  116.          [{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80} ,{x:80,y:20,z:0}],   
  117.          [],   
  118.          [{顏色:[227,76,38],頂點:[0,2,1,0]},{顏色:[227,76,38],頂點:[0,3,22 ,0]}]   
  119.       );   
  120.    }  
  121.    k3dmain.addK3DObject(objBase);   
  122.   
  123.    var objHtml = new 
  124. new
  125.    
  126.  (objHtml)   
  127.    {   
  128.       繪圖模式 = 「實心」
  129. ;   
  130.       著色模式 = "光源"
  131. ;   
  132.       //sortmode = 「未排序」;
  133.   
  134.       顏色 = [64,64,64];   
  135.       雙面= true
  136. ;   
  137.       addphi = -0.5;   
  138.       約 = 100;   
  139.       比例= 0.75;   
  140.       每等級 = 1000;   
  141.       init(   
  142.          [{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}],   
  143.          [],   
  144.          [{頂點:[0,1,2,3,4,5,6,7,8,9,10,11,0]},{頂點:[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]}]   
  145.       );   
  146.    }  
  147.    k3dmain.addK3DObject(objHtml);   
  148.   
  149.    //新增渲染循環回呼  
  150.    var ctx = canvas.getContext('2d'
  151.    
  152. var rotationOffset = 0;   
  153.    
  154. var len = (canvas.height > canvas.width ? vas.height :height > canvas.width ?     k3dmain.clearBackground = 
  155. false
  156. ;       k3dmain.callback = 
  157. 函數
  158. ()       {   
  159.       
  160. //手動清除背景 - 因為我們想要渲染額外的好東西
  161.          ctx.clearRect(0, 0, canvas.width, canvas.height);   
  162.   
  163.       
  164. //在 K3D 進行 3D 渲染前繪製背景效果
  165.          ctx.save();   
  166.       ctx.translate(canvas.width/2, canvas.height/2);   
  167.       ctx.rotate(rotationOffset);   
  168.   
  169.       
  170. //第一個填充通道 - 外光線
  171.          
  172. var
  173.  射線計數 = 24;         ctx.fillStyle = 
  174. "#eee"
  175. ;          ctx.beginPath();   
  176.       
  177. for
  178.  (varO       {   
  179.          
  180. //旋轉情境
  181.   
  182.          ctx.rotate(TWOPI / RAYCOUNT);   
  183.          ctx.moveTo(0, 0);   
  184.          ctx.lineTo(-20, len);   
  185.          ctx.lineTo(20, len);   
  186.       }  
  187.       ctx.closePath();   
  188.       ctx.fill();   
  189.       //第二個填充通道 - 內部光線   
  190.       ctx.fillStyle = "#fff";   
  191.       ctx.beginPath();   
  192.       for (varO
  193.       {   
  194.          
  195. //旋轉情境   
  196.          ctx.rotate(TWOPI / RAYCOUNT);   
  197.          ctx.moveTo(0, 0);   
  198.          ctx.lineTo(-15, len);   
  199.          ctx.lineTo(15, len);   
  200.       }   
  201.       ctx.closePath();   
  202.       ctx.fill();   
  203.       ctx.restore();   
  204.       rotationOffset = 0.005;   
  205.   
  206.       
  207. //將使用者互動套用於旋轉  
  208.       
  209. for (var i=0, )   
  210.       {   
  211.          objs[i].ophi = targetRotationX;   
  212.       }   
  213.   
  214.       
  215. if (targetRotationX > -0.5) targetRotationX -= 0.05;  >       
  216. else
  217.  if if       
  218. if (targetRotationX > -0.55 &&     };   
  219.   
  220.    //開始示範循環
  221.       k3dmain.paused = true
  222. ;       setInterval(函數
  223. (){k3dmain.tick()}, 1000/60);    }  
  224.   
  225. //從杜布先生http://mrdoob.com/借來的漂亮的拖曳/觸摸事件捕獲代碼  
  226. var targetRotationX = 0;   
  227. var targetRotationOnMouseDownX = 0;   
  228. var mouseX = 0;   
  229. var mouseXOnMouseDown = 0;   
  230. var targetRotationY = 0;   
  231. var targetRotationOnMouseDownY = 0;   
  232. var mouseY = 0;   
  233. var mouseYOnMouseDown = 0;   
  234.   
  235. var windowHalfX = window.innerWidth / 2;   
  236. var windowHalfY = window.innerHeight / 2;   
  237.   
  238. document.addEventListener('mousedown', onDocumentMouseDown,  document.addEventListener(
  239. 'touchstart'
  240. , onDocumentTouchStart, false document.addEventListener('touchmove'
  241. , onDocumentTouchMove, 
  242. false   
  243. 函數
  244.  onDocumentMouseDown( event ) {   
  245.     event.preventDefault();   
  246.   
  247.  document.addEventListener(
  248. 'mousemove'
  249. , onDocumentMouseMove, 
  250. false
  251.  document.addEventListener('mouseup', onDocumentMouseUp, false
  252.  document.addEventListener('mouseout', onDocumentMouseOut, false   
  253.  mouseXOnMouseDown = event.clientX - windowHalfX;     targetRotationOnMouseDownX = targetRotationX;     mouseYOnMouseDown = event.clientY - windowHalfY;  
  254.  targetRotationOnMouseDownY = targetRotationY;   
  255. }   
  256.   
  257. 函數 onDocumentMouseMove( 事件 )   
  258. {   
  259.  mouseX = event.clientX - windowHalfX;   
  260.  targetRotationX = targetRotationOnMouseDownX  (mouseX - mouseXOnMouseDown) * 0.02;     mouseY = event.clientY - windowHalfY;   
  261.  targetRotationY = targetRotationOnMouseDownY  (mouseY - mouseYOnMouseDown) * 0.02;   
  262. }  
  263.   
  264. 函數 onDocumentMouseUp( event )   
  265. {   
  266.  document.removeEventListener('mousemove', onDocumentMouseMove, false
  267.  document.removeEventListener('mouseup', onDocumentMouseUp, false;   
  268.  document.removeEventListener('mouseout', onDocumentMouseOut, false;   
  269. }   
  270.   
  271. 函數 onDocumentMouseOut( event )   
  272. {   
  273.  document.removeEventListener(
  274. 'mousemove', onDocumentMouseMove, false  document.removeEventListener(
  275. 'mouseup', onDocumentMouseUp, false;     document.removeEventListener(
  276. 'mouseout', onDocumentMouseOut, false;    }   
  277.   
  278. 函數
  279.  onDocumentTouchStart( event )    {   
  280.  
  281.  (event.touches.length == 1)     {   
  282.   event.preventDefault();   
  283.   
  284.   mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;   
  285.   targetRotationOnMouseDownX = targetRotationX;   
  286.   mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;  
  287.   targetRotationOnMouseDownY = targetRotationY;   
  288.  }   
  289. }   
  290.   
  291. 函數
  292.  onDocumentTouchMove( 事件 )    {   
  293.  
  294.  (event.touches.length == 1)     {   
  295.   event.preventDefault();   
  296.   
  297.   mouseX = event.touches[0].pageX - windowHalfX;   
  298.   targetRotationX = targetRotationOnMouseDownX  (mouseX - mouseXOnMouseDown) * 0.05;   
  299.   mouseY = event.touches[0].pageY - windowHalfY;   
  300.   targetRotationY = targetRotationOnMouseDownY  (mouseX - mouseYOnMouseDown) * 0.05;   
  301.  }   
  302. }   
  303. 以上就是本文的全部內容,希望對大家的學習有所幫助。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板