首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

作者：喜生-Da | 来源：互联网 | 2017-05-11 14:13
这篇文章主要为大家介绍了一款非常棒的多视角3D可旋转的HTML5Logo动画，可以无限的旋转，从而可以从多个视角来观察HTML5Logo，感兴趣的小伙伴们可以参考一下
这是一款基于HTML5和CSS3的3D动画特效，与之前的3D特效不同的是，这款是完全用HTML5特性实现的，而并非用多张图片叠加起来。这款3D动画还有一个特点是可以无限的旋转，从而可以从多个视角来观察HTML5 Logo。

在线演示 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板

  1. <p class="link-overlay">
  3. p>
  4. <canvas id="canvas" style="background-color:#ddd">canvas>

Javascript代码

Javascript Code复制内容到剪贴板

  1. // bind to window onload handler
  2. window.addEventListener('load', onloadHandler, false);
  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);
  14. // generate 3D objects
  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);
  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);
  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);
  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);
  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);
  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);
  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);
  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);
  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;
  166. // apply user interaction to rotation
  167. for (var i=0, objs=k3dmain.objects; i
  168. {
  169. objs[i].ophi += targetRotationX;
  170. }
  172. if (targetRotationX > -0.5) targetRotationX -= 0.05;
  173. else if (targetRotationX <-0.55) targetRotationX += 0.05;
  174. if (targetRotationX > -0.55 && targetRotationX <-0.5) targetRotatiOnX= -0.5;
  175. };
  177. // start demo loop
  178. k3dmain.paused = true;
  179. setInterval(function(){k3dmain.tick()}, 1000/60);
  180. }
  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;
  192. var windowHalfX = window.innerWidth / 2;
  193. var windowHalfY = window.innerHeight / 2;
  195. document.addEventListener('mousedown', onDocumentMouseDown, false);
  196. document.addEventListener('touchstart', onDocumentTouchStart, false);
  197. document.addEventListener('touchmove', onDocumentTouchMove, false);
  199. function onDocumentMouseDown( event ) {
  201. event.preventDefault();
  203. document.addEventListener('mousemove', onDocumentMouseMove, false);
  204. document.addEventListener('mouseup', onDocumentMouseUp, false);
  205. document.addEventListener('mouseout', onDocumentMouseOut, false);
  207. mouseXOnMouseDown= event.clientX - windowHalfX;
  208. targetRotatiOnOnMouseDownX= targetRotationX;
  209. mouseYOnMouseDown= event.clientY - windowHalfY;
  210. targetRotatiOnOnMouseDownY= targetRotationY;
  211. }
  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. }
  221. function onDocumentMouseUp( event )
  222. {
  223. document.removeEventListener('mousemove', onDocumentMouseMove, false);
  224. document.removeEventListener('mouseup', onDocumentMouseUp, false);
  225. document.removeEventListener('mouseout', onDocumentMouseOut, false);
  226. }
  228. function onDocumentMouseOut( event )
  229. {
  230. document.removeEventListener('mousemove', onDocumentMouseMove, false);
  231. document.removeEventListener('mouseup', onDocumentMouseUp, false);
  232. document.removeEventListener('mouseout', onDocumentMouseOut, false);
  233. }
  235. function onDocumentTouchStart( event )
  236. {
  237. if (event.touches.length == 1)
  238. {
  239. event.preventDefault();
  241. mouseXOnMouseDown= event.touches[0].pageX - windowHalfX;
  242. targetRotatiOnOnMouseDownX= targetRotationX;
  243. mouseYOnMouseDown= event.touches[0].pageY - windowHalfY;
  244. targetRotatiOnOnMouseDownY= targetRotationY;
  245. }
  246. }
  248. function onDocumentTouchMove( event )
  249. {
  250. if (event.touches.length == 1)
  251. {
  252. event.preventDefault();
  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. }

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

推荐阅读
  • config

    VScode格式化文档换行或不换行的设置方法

    VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]
  • config

    CSS3选择器的使用方法详解，提高Web开发效率和精准度

    CSS3选择器的使用方法详解，提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
  • config

    Alink回归预测的不完善问题及期待

    本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
  • config

    Hibernate基础映射

    在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • spring

    SpringBoot集成前端模版（thymeleaf）的配置步骤

    本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
  • spring

    知识图谱——机器大脑中的知识库

    知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • spring

    Java验证码——kaptcha的使用配置及样式

    Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • spring

    javascript入门·表单与表单元素总结（表单验证）

    表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]
  • spring

    Google Contacts API未返回输出 - Google Contacts API not returning output

    Itwasworkingcorrectly,butyesterdayitstartedgiving401.IhavetriedwithGooglecontactsAPI ... [详细]
  • lua

    lua语言闭包、模式匹配、日期、编译、模块的特性及应用

    本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]
  • lua

    后台获取视图对应的字符串

    后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ... [详细]
  • lua

    ABAP开发发送邮件程序的配置和代码整理

    本文介绍了通过ABAP开发往外网发邮件的需求，并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定，可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度：184字。 ... [详细]
  • lua

    高质量SQL书写的30条建议

    高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]
  • main

    指针的引用以及在什么情况下使用指针的引用

    本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址，通过指针可以修改指针所指的变量的值。然而，如果想要修改指针的指向，就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法，并思考了在修改指针的指向后，取指针的输出结果。 ... [详细]
  • main

    工程中添加Android Dependencies

    在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
author-avatar
喜生-Da
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有