javaScript制作3D效果展示

最新推荐文章于 2023-07-07 19:20:44 发布

didou5912

最新推荐文章于 2023-07-07 19:20:44 发布

阅读量315

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/maps/archive/2012/10/10/2719049.html

版权

这个例子主要展示一下3D效果，我特意在网站找了一个地球的图片进行观看，很有感觉。呵呵。下面是效果图。

注：这个例子主要有两个文件：
1：sanwei.html
2：images文件夹下面的一个rouxts2.png图片

sanwei.html:

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