搜索
首页web前端H5教程多视角3D可旋转的HTML5 Logo动画_html5教程技巧

多视角3D可旋转的HTML5 Logo动画_html5教程技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
3d旋转html5logo

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

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

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
H5：网络标准和技术的发展H5：网络标准和技术的发展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能，使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速记吗？探索细节H5是HTML5的速记吗？探索细节Apr 14, 2025 am 12:05 AM

H5不仅仅是HTML5的简称，它代表了一个更广泛的现代网页开发技术生态：1.H5包括HTML5、CSS3、JavaScript及相关API和技术；2.它提供更丰富、互动、流畅的用户体验，能在多设备上无缝运行；3.使用H5技术栈可以创建响应式网页和复杂交互功能。

H5和HTML5：网络开发中常用的术语H5和HTML5：网络开发中常用的术语Apr 13, 2025 am 12:01 AM

H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。

H5指的是什么？探索上下文H5指的是什么？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳实践H5：工具，框架和最佳实践Apr 11, 2025 am 12:11 AM

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面，支持组件化开发。2.React通过虚拟DOM优化页面渲染，适合复杂应用。3.Webpack用于模块打包，优化资源加载。

HTML5的遗产：当前了解H5HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLH5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7515
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
79
11
win11激活密钥永久
53
19
NYT连接提示和答案
19
64
显示更多