设为首页收藏本站
切换到窄版

工大后院

 找回密码
 加入后院

扫一扫，访问微社区

QQ登录

只需一步，快速开始

搜索
工大后院»论坛 › 后院书塾 › 【编程】编程圣殿 › [转]3d矩阵javascript
返回列表 发新帖
查看: 1332|回复: 1

[转]3d矩阵javascript

[复制链接]
发表于 2009-12-14 14:02 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Wanna tell her - interactive DHTML </title>
  5. <meta http-equiv="imagetoolbar" content="no">
  6. <style type="text/css">
  7. html {
  8. overflow: hidden;
  9. }
  10. body {
  11. position: absolute;
  12. margin: 0px;
  13. padding: 0px;
  14. background: #fff;
  15. width: 100%;
  16. height: 100%;
  17. }
  18. #screen {
  19. position: absolute;
  20. left: 10%;
  21. top: 10%;
  22. width: 80%;
  23. height: 80%;
  24. background: #fff;
  25. }
  26. #screen img {
  27. position: absolute;
  28. cursor: pointer;
  29. width: 0px;
  30. height: 0px;
  31. -ms-interpolation-mode:nearest-neighbor;
  32. }
  33. #bankImages {
  34. visibility: hidden;
  35. }
  36. #FPS {
  37. position: absolute;
  38. right: 5px;
  39. bottom: 5px;
  40. font-size: 10px;
  41. color: #666;
  42. font-family: verdana;
  43. }
  44. </style>
  45. <script type="text/javascript">
  46. /* ==== Easing function ==== */
  47. var Library = {};
  48. Library.ease = function () {
  49. this.target = 0;
  50. this.position = 0;
  51. this.move = function (target, speed) {
  52. this.position += (target - this.position) * speed;
  53. }
  54. }
  55. var tv = {
  56. /* ==== variables ==== */
  57. O : [],
  58. fps : 0,
  59. screen : {},
  60. angle : {
  61. x : new Library.ease(),
  62. y : new Library.ease()
  63. },
  64. camera : {
  65. x : new Library.ease(),
  66. y : new Library.ease()
  67. },
  68. create3DHTML : function (i, x, y, z, sw, sh) {
  69. /* ==== create HTML image element ==== */
  70. var o = document.createElement('img');
  71. o.src = i.src;
  72. tv.screen.obj.appendChild(o);
  73. /* ==== 3D coordinates ==== */
  74. o.point3D = {
  75. x : x,
  76. y : y,
  77. z : new Library.ease(),
  78. sw : sw,
  79. sh : sh,
  80. w : i.width,
  81. h : i.height
  82. };
  83. o.point3D.z.target = z;
  84. /* ==== push object ==== */
  85. o.point2D = {};
  86. tv.O.push(o);
  87. /* ==== on mouse over event ==== */
  88. o.onmouseover = function () {
  89. if (this != tv.o) {
  90. this.point3D.z.target = tv.mouseZ;
  91. tv.camera.x.target = this.point3D.x;
  92. tv.camera.y.target = this.point3D.y;
  93. if (tv.o) tv.o.point3D.z.target = 0;
  94. tv.o = this;
  95. }
  96. return false;
  97. }
  98. /* ==== on mousedown event ==== */
  99. o.onmousedown = function () {
  100. if (this == tv.o) {
  101. if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;
  102. else {
  103. tv.o = false;
  104. this.onmouseover();
  105. }
  106. }
  107. }
  108. /* ==== main 3D function ==== */
  109. o.animate = function () {
  110. /* ==== 3D coordinates ==== */
  111. var x = this.point3D.x - tv.camera.x.position;
  112. var y = this.point3D.y - tv.camera.y.position;
  113. this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);
  114. /* ==== rotations ==== */
  115. var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;
  116. var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;
  117. var yz = tv.angle.cy * xz - tv.angle.sy * x;
  118. var yx = tv.angle.sy * xz + tv.angle.cy * x;
  119. /* ==== 2D transform ==== */
  120. var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
  121. x = yx * scale;
  122. y = xy * scale;
  123. var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));
  124. var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));
  125. /* ==== HTML rendering ==== */
  126. var o = this.style;
  127. o.left = Math.round(x + tv.screen.w - w * .5) + 'px';
  128. o.top = Math.round(y + tv.screen.h - h * .5) + 'px';
  129. o.width = w + 'px';
  130. o.height = h + 'px';
  131. o.zIndex = 10000 + Math.round(scale * 1000);
  132. }
  133. },
  134. /* ==== init script ==== */
  135. init : function (structure, FL, mouseZ, rx, ry) {
  136. this.screen.obj = document.getElementById('screen');
  137. this.screen.obj.onselectstart = function () { return false; }
  138. this.screen.obj.ondrag = function () { return false; }
  139. this.mouseZ = mouseZ;
  140. this.camera.focalLength = FL;
  141. this.angle.rx = rx;
  142. this.angle.ry = ry;
  143. /* ==== create objects ==== */
  144. var i = 0, o;
  145. while( o = structure[i++] )
  146. this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);
  147. /* ==== start script ==== */
  148. this.resize();
  149. mouse.y = this.screen.y + this.screen.h;
  150. mouse.x = this.screen.x + this.screen.w;
  151. /* ==== loop ==== */
  152. setInterval(tv.run, 16);
  153. setInterval(tv.dFPS, 1000);
  154. },
  155. /* ==== resize window ==== */
  156. resize : function () {
  157. var o = tv.screen.obj;
  158. if (o) {
  159. tv.screen.w = o.offsetWidth / 2;
  160. tv.screen.h = o.offsetHeight / 2;
  161. for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {
  162. tv.screen.x += o.offsetLeft;
  163. tv.screen.y += o.offsetTop;
  164. }
  165. }
  166. },
  167. /* ==== main loop ==== */
  168. run : function () {
  169. tv.fps++;
  170. /* ==== motion ease ==== */
  171. tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);
  172. tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);
  173. tv.camera.x.move(tv.camera.x.target, .025);
  174. tv.camera.y.move(tv.camera.y.target, .025);
  175. /* ==== angles sin and cos ==== */
  176. tv.angle.cx = Math.cos(tv.angle.x.position);
  177. tv.angle.sx = Math.sin(tv.angle.x.position);
  178. tv.angle.cy = Math.cos(tv.angle.y.position);
  179. tv.angle.sy = Math.sin(tv.angle.y.position);
  180. /* ==== loop through images ==== */
  181. var i = 0, o;
  182. while( o = tv.O[i++] ) o.animate();
  183. },
  184. /* ==== trace frames per seconds ==== */
  185. dFPS : function () {
  186. document.getElementById('FPS').innerHTML = tv.fps + ' FPS';
  187. tv.fps = 0;
  188. }
  189. }
  190. /* ==== global mouse position ==== */
  191. var mouse = {
  192. x : 0,
  193. y : 0
  194. }
  195. document.onmousemove = function(e) {
  196. if (window.event) e = window.event;
  197. mouse.x = e.clientX;
  198. mouse.y = e.clientY;
  199. return false;
  200. }
  201. /* ==== starting script ==== */
  202. onload = function() {
  203. onresize = tv.resize;
  204. /* ==== build grid ==== */
  205. var img = document.getElementById('bankImages').getElementsByTagName('img');
  206. var structure = [];
  207. var imgIndex=0;
  208. for (var i = -300; i <= 300; i += 120){
  209. for (var j = -300; j <= 300; j += 120){
  210. if(imgIndex==img.length){
  211. imgIndex=0;
  212. }
  213. structure.push({ img:img[imgIndex++], x:i, y:j, z:0, sw:.5, sh:.5 });
  214. }
  215. }
  216. /* ==== let's go ==== */
  217. tv.init(structure, 350, -200, .005, .0025);
  218. }
  219. </script>
  220. </head>
  221. <body>
  222. <div id="screen"> </div>
  223. <div id="bankImages">
  224. <img src="http://home.blueidea.com/attachment/200907/2/174912_1246528833Bn5p_t.jpg">
  225. <img src="http://home.blueidea.com/attachment/pages/2004/10/726/preview_b01_t.jpg">
  226. <img src="http://home.blueidea.com/attachment/200906/23/2056_1245728462JHIh_t.jpg">
  227. <img src="http://home.blueidea.com/attachment/200906/14/92_12450166060Jn0_t.jpg">
  228. <img src="http://home.blueidea.com/attachment/200905/26/577_12433799142jL5_t.jpg">
  229. <img src="http://home.blueidea.com/attachment/200906/23/390650_124571746163Hf_t.jpg">
  230. </div>
  231. <div id="FPS"> </div>
  232. </body>
  233. </html>
复制代码
回复

使用道具 举报

发表于 2009-12-14 18:16 | 显示全部楼层
太强大了.
回复 顶 踩

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入后院

本版积分规则

QQ|Archiver|手机版|小黑屋|广告业务Q|工大后院 ( 粤ICP备10013660号 )

GMT+8, 2024-5-9 15:54

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表