首页 > 代码库 > 三维云模拟Three.js
三维云模拟Three.js
http://www.mrdoob.com/#/131/clouds
http://www.webgl.com/2012/03/webgl-demo-clouds/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Mr.doob</title> 6 <style> 7 8 html { 9 10 height: 100%; 11 12 } 13 14 body { 15 16 margin: 0; 17 height: 100%; 18 font-family: Helvetica, Arial, sans-serif; 19 background-color: #000000; 20 overflow: hidden; 21 22 } 23 24 #nav { 25 26 background: linear-gradient(to bottom, #000000 50%,#1d1d1d 97%,#333333 97%); 27 width: 100%; 28 height: 61px; 29 overflow: hidden; 30 31 } 32 33 .project { 34 35 -webkit-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); 36 -moz-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); 37 -ms-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); 38 -o-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); 39 transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */ 40 41 /* 42 -webkit-box-shadow: 0px 0px 20px 0px #000000; 43 -moz-box-shadow: 0px 0px 20px 0px #000000; 44 box-shadow: 0px 0px 20px 0px #000000; 45 */ 46 47 position: relative; 48 49 width: 20px; 50 height: 61px; 51 52 float: left; 53 /* padding: 12px 0px;*/ 54 55 cursor: pointer; 56 57 overflow: hidden; 58 59 } 60 61 .project .image { 62 63 position: absolute; 64 top: 12px; 65 border: 2px solid #ffffff; 66 width: 32px; 67 height: 32px; 68 background-color: #000000; 69 background-image: url(‘files/projects/thumbnails.png‘); 70 71 } 72 73 .project div { 74 75 position: absolute; 76 77 left: 42px; 78 top: 11px; 79 width: 132px; 80 81 color: #ffffff; 82 font-weight: bold; 83 font-size: 9px; 84 line-height: 13px; 85 86 } 87 88 .project:hover { 89 90 -webkit-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 91 -moz-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 92 -ms-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 93 -o-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 94 transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */ 95 96 width: 45px; 97 98 } 99 100 .project.selected { 101 102 -webkit-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 103 -moz-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 104 -ms-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 105 -o-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); 106 transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */ 107 108 width: 180px; 109 110 } 111 112 .project.selected:hover { 113 114 width: 180px; 115 116 } 117 118 #viewer { 119 120 position: absolute; 121 width: 100%; 122 top: 61px; 123 bottom: 0px; 124 125 } 126 127 </style> 128 </head> 129 <body> 130 131 <script src="http://cdn.webglstats.com/stat.js" defer="defer" async="async"></script> 132 133 <div id="nav"> 134 <map name="logo"> 135 <area shape="rect" href="/" coords="12,13,91,32" alt="Mr.doob" /> 136 <area shape="rect" href="http://ricardocabello.com/blog" coords="12,32,44,46" alt="Blog" /> 137 <area shape="rect" href="http://twitter.com/mrdoob" coords="47,32,88,46" alt="Twitter" /> 138 </map> 139 <img src="files/showcase/logo.png" alt="logo" width="105" style="float:left" usemap="#logo" /> 140 141 <!-- <a href="http://www.mamicode.com/blog"><img src="http://www.mamicode.com/files/showcase/more.png" width="60" style="float:left" /></a> --> 142 </div> 143 144 <div id="viewer"> 145 <iframe id="iframe" style="border:0;width:100%;height:100%"></iframe> 146 </div> 147 148 <script> 149 150 var data = [ 151 152 { 153 "id": 154, 154 "category": 1, 155 "name": "Kinecdysis Writer", 156 "timestamp": "2014/04/23", 157 "link": "http://kinecdysis.sougwen.com/" 158 }, 159 160 { 161 "id": 153, 162 "category": 1, 163 "name": "Sporel", 164 "timestamp": "2013/12/24", 165 "link": "http://christmasexperiments.com/2013/24/" 166 }, 167 168 { 169 "id": 152, 170 "category": 1, 171 "name": "Obsidian", 172 "timestamp": "2013/07/28", 173 "link": "/files/temp/xplsv_obsidian/" 174 }, 175 176 { 177 "id": 151, 178 "category": 1, 179 "name": "Translucent Network", 180 "timestamp": "2013/05/28", 181 "link": "http://www.thebeautybehindit.com/secure/" 182 }, 183 184 { 185 "id": 150, 186 "category": 2, 187 "name": "Beach Balls", 188 "timestamp": "2013/03/24", 189 "link": "/lab/javascript/beachballs/" 190 }, 191 192 /* 193 { 194 "id": 149, 195 "category": 1, 196 "name": "Just Vined", 197 "timestamp": "2013/01/27", 198 "link": "http://justvined.com" 199 200 }, 201 */ 202 203 { 204 "id": 148, 205 "category": 1, 206 "name": "Aaronetrope", 207 "timestamp": "2012/10/15", 208 "link": "http://www.aaronkoblin.com/Aaronetrope/", 209 "link_info": "https://plus.google.com/113862800338869870683/posts/Q3KrZwohayB" 210 }, 211 212 { 213 "id": 147, 214 "category": 2, 215 "name": "Google Space", 216 "timestamp": "2012/10/15", 217 "link": "/projects/chromeexperiments/google-space/" 218 }, 219 220 { 221 "id": 146, 222 "category": 2, 223 "name": "HTML Editor", 224 "timestamp": "2012/09/02", 225 "link": "/projects/htmleditor/" 226 }, 227 228 { 229 "id": 145, 230 "category": 2, 231 "name": "Webcam Displacement", 232 "timestamp": "2012/08/25", 233 "link": "/lab/javascript/webcam/displace/" 234 }, 235 236 { 237 "id": 144, 238 "category": 2, 239 "name": "Magic dust", 240 "timestamp": "2012/07/31", 241 "link": "/lab/javascript/webgl/particles/magicdust.html" 242 }, 243 /* 244 { 245 "id": 143, 246 "category": 2, 247 "name": "DAT particles (thanks zz85)", 248 "timestamp": "2012/07/31", 249 "link": "/lab/javascript/webgl/particles/particles_zz85_1m.html" 250 }, 251 */ 252 { 253 "id": 142, 254 "category": 2, 255 "name": "Winning Solitaire", 256 "timestamp": "2012/05/07", 257 "link": "/lab/javascript/effects/solitaire/" 258 }, 259 /* 260 { 261 "id": 141, 262 "category": 2, 263 "name": "IE with WebGL", 264 "timestamp": "2012/05/03", 265 "link": "/lab/javascript/webgl/ie/" 266 }, 267 268 { 269 "id": 140, 270 "category": 1, 271 "name": "The Single Lane Superhighway", 272 "timestamp": "2011/12/07", 273 "link": "http://thesinglelanesuperhighway.com/" 274 }, 275 */ 276 { 277 "id": 139, 278 "category": 1, 279 "name": "GLSL Sandbox", 280 "timestamp": "2011/11/09", 281 "link": "/projects/glsl_sandbox/" 282 }, 283 284 { 285 "id": 138, 286 "category": 2, 287 "name": "Kinect", 288 "timestamp": "2011/10/30", 289 "link": "/lab/javascript/webgl/kinect/" 290 }, 291 292 { 293 "id": 137, 294 "category": 2, 295 "name": "Voxels liquid", 296 "timestamp": "2011/10/17", 297 "link": "/lab/javascript/webgl/voxels_liquid/" 298 }, 299 300 { 301 "id": 135, 302 "category": 2, 303 "name": "Sphere", 304 "timestamp": "2011/08/16", 305 "link": "/lab/javascript/webgl/sphere/" 306 }, 307 308 { 309 "id": 134, 310 "category": 2, 311 "name": "Comments Audio Visualiser", 312 "timestamp": "2011/06/17", 313 "link": "/lab/javascript/commentsvisualiser/" 314 }, 315 316 { 317 "id": 133, 318 "category": 1, 319 "name": "3 Dreams of Black", 320 "timestamp": "2011/05/12", 321 "link": "/projects/google/rome/redirect/" 322 }, 323 324 { 325 "id": 132, 326 "category": 1, 327 "name": "WebGL Globe", 328 "timestamp": "2011/05/05", 329 "link": "/projects/google/globe/redirect/" 330 }, 331 332 { 333 "id": 131, 334 "category": 2, 335 "name": "Clouds", 336 "timestamp": "2011/03/25", 337 "link": "/lab/javascript/webgl/clouds/" 338 }, 339 340 { 341 "id": 130, 342 "category": 2, 343 "name": "Disturb", 344 "timestamp": "2010/12/11", 345 "link": "/lab/javascript/effects/disturb/" 346 }, 347 348 { 349 "id": 129, 350 "category": 1, 351 "name": "Voxels", 352 "timestamp": "2010/11/06", 353 "link": "/projects/voxels/#A/bnciaTraheakhacTSiahfaotaiafUscierhoShahfShahfafiWheSheUeWSfafhchhefffchhWffahherhpfXTbdUhUhUhVihShaffahfahhcfhYhaffYhahhaeeUhahhahhcdfShYhYhafhUheffdafhcjhShYfYfahfYfahfYfafhcjhYeahfShShWhfVbfdjjhaffaffaffafhafhafhahhahhahhahfahfeehhahfahfaffaffafhafhahhWhfahhWhfWffahhefXhUhehffahiaddbnfffYhcmfrfsaaiU" 354 }, 355 356 { 357 "id": 128, 358 "category": 2, 359 "name": "Internet Explorer 6", 360 "timestamp": "2010/10/07", 361 "link": "/lab/javascript/effects/ie6/" 362 }, 363 364 { 365 "id": 127, 366 "category": 1, 367 "name": "The Wilderness Downtown", 368 "timestamp": "2010/08/30", 369 "link": "/projects/radicalmedia/arcadefire/redirect/" 370 }, 371 372 { 373 "id": 126, 374 "category": 1, 375 "name": "Or so they say...", 376 "timestamp": "2010/07/25", 377 "link": "http://xplsv.com/prods/demos/xplsv_orsotheysay/", 378 "link_info": "/blog/post/702" 379 }, 380 381 { 382 "id": 125, 383 "category": 1, 384 "name": "Multiuser Sketchpad", 385 "timestamp": "2010/07/7", 386 "link": "/projects/multiuserpad/", 387 "link_info": "/blog/post/701" 388 }, 389 390 { 391 "id": 124, 392 "category": 2, 393 "name": "Plane Deformations", 394 "timestamp": "2010/06/12", 395 "link": "/lab/javascript/effects/plane_deformations/", 396 "link_info": "/blog/post/699" 397 }, 398 399 { 400 "id": 123, 401 "category": 2, 402 "name": "Water Type", 403 "timestamp": "2010/06/4", 404 "link": "/lab/javascript/effects/water/02/", 405 "link_info": "/blog/post/696" 406 }, 407 408 { 409 "id": 122, 410 "category": 1, 411 "name": "Three.js", 412 "timestamp": "2010/04/23", 413 "link": "http://threejs.org/", 414 "link_info": "/blog/post/693" 415 }, 416 417 { 418 "id": 120, 419 "category": 1, 420 "name": "Harmony", 421 "timestamp": "2010/03/08", 422 "link": "/projects/harmony/", 423 "link_info": "/blog/post/689" 424 }, 425 426 { 427 "id": 119, 428 "category": 2, 429 "name": "Zoom blur", 430 "timestamp": "2010/03/08", 431 "link": "/lab/javascript/effects/zoomblur/03/" 432 }, 433 434 { 435 "id": 118, 436 "category": 2, 437 "name": "Rotozoomer", 438 "timestamp": "2010/02/26", 439 "link": "/lab/javascript/effects/rotozoomer/00/" 440 }, 441 442 { 443 "id": 117, 444 "category": 2, 445 "name": "Fire", 446 "timestamp": "2010/02/15", 447 "link": "/lab/javascript/effects/fire/01/" 448 }, 449 450 { 451 "id": 116, 452 "category": 2, 453 "name": "Water Remix", 454 "timestamp": "2010/02/11", 455 "link": "/lab/javascript/effects/water/01/" 456 }, 457 458 { 459 "id": 115, 460 "category": 2, 461 "name": "Water", 462 "timestamp": "2010/02/11", 463 "link": "/lab/javascript/effects/water/00/" 464 }, 465 466 { 467 "id": 99, 468 "category": 2, 469 "name": "Branching", 470 "timestamp": "2009/11/29", 471 "link": "/lab/javascript/effects/branching/02/", 472 "link_info": "/blog/post/680" 473 }, 474 475 { 476 "id": 112, 477 "category": 2, 478 "name": "Branching", 479 "timestamp": "2009/11/29", 480 "link": "/lab/javascript/effects/branching/01_spite_mrdoob/", 481 "link_info": "/blog/post/680" 482 }, 483 484 { 485 "id": 111, 486 "category": 2, 487 "name": "Branching", 488 "timestamp": "2009/11/29", 489 "link": "/lab/javascript/effects/branching/01/", 490 "link_info": "/blog/post/680" 491 }, 492 493 { 494 "id": 110, 495 "category": 2, 496 "name": "Branching", 497 "timestamp": "2009/11/29", 498 "link": "/lab/javascript/effects/branching/00/", 499 "link_info": "/blog/post/680" 500 }, 501 502 { 503 "id": 98, 504 "category": 2, 505 "name": "3D Waveform", 506 "timestamp": "2009/11/09", 507 "link": "/lab/javascript/webgl/waveform/", 508 "link_info": "/blog/post/677" 509 }, 510 511 { 512 "id": 107, 513 "category": 2, 514 "name": "Strange Attractor", 515 "timestamp": "2009/11/04", 516 "link": "/lab/javascript/strangeattractor/" 517 }, 518 519 { 520 "id": 106, 521 "category": 2, 522 "name": "Checkbox Painter", 523 "timestamp": "2009/11/04", 524 "link": "/lab/javascript/checkbox_painter/" 525 }, 526 527 { 528 "id": 105, 529 "category": 2, 530 "name": "Checkboxes Ball", 531 "timestamp": "2009/11/04", 532 "link": "/lab/javascript/checkboxes/" 533 }, 534 535 { 536 "id": 103, 537 "category": 1, 538 "name": "60fps", 539 "timestamp": "2009/09/10", 540 "link": "http://60fps.com" 541 }, 542 543 { 544 "id": 97, 545 "category": 2, 546 "name": "Depth of Field", 547 "timestamp": "2009/06/10", 548 "link": "/projects/chromeexperiments/depth_of_field/" 549 }, 550 551 { 552 "id": 96, 553 "category": 1, 554 "name": "Google Sphere", 555 "timestamp": "2009/05/28", 556 "link": "/projects/chromeexperiments/google-sphere/" 557 }, 558 559 { 560 "id": 92, 561 "category": 1, 562 "name": "Google Gravity", 563 "timestamp": "2009/03/18", 564 "link": "/projects/chromeexperiments/google-gravity/", 565 "link_info": "/blog/post/644" 566 }, 567 568 { 569 "id": 91, 570 "category": 1, 571 "name": "Ball Pool", 572 "timestamp": "2009/02/12", 573 "link": "/projects/chromeexperiments/ball-pool/", 574 "link_info": "/blog/post/644" 575 }, 576 577 { 578 "id": 83, 579 "category": 1, 580 "name": "Youtube, now in Super HD!", 581 "timestamp": "2008/09/30", 582 "link": "/lab/youtube/superHD/", 583 "link_info": "/blog/post/597" 584 } 585 586 ]; 587 588 var nav = document.getElementById( ‘nav‘ ); 589 var viewer = document.getElementById( ‘viewer‘ ); 590 var iframe = document.getElementById( ‘iframe‘ ); 591 592 var selected, divs = {}; 593 594 init(); 595 596 function init () { 597 598 buildNav( data ); 599 600 if ( window.location.hash ) { 601 602 var hash = window.location.hash.substr( 1 ); 603 604 var id = hash.split(‘/‘)[1]; 605 606 for ( var i in data ) { 607 608 if ( data[ i ].id == id ) { 609 610 loadProject( data[ i ] ); 611 break; 612 613 } 614 615 } 616 617 } else { 618 619 loadProject( data[ 0 ] ); 620 621 } 622 623 window.addEventListener( ‘popstate‘, function ( event ) { 624 625 if ( event.state != null ) loadProject( event.state ); 626 627 }, false ); 628 629 }; 630 631 function buildNav( projects ) { 632 633 for ( var i in projects ) { 634 635 nav.appendChild( buildProject( projects[ i ] ) ); 636 637 } 638 639 } 640 641 function buildProject( data ) { 642 643 var div = document.createElement( ‘div‘ ); 644 div.className = ‘project‘; 645 div.addEventListener( ‘click‘, function ( event ) { 646 647 loadProject( data ); 648 window.location.hash = ‘/‘ + data.id + ‘/‘ + data.name.toLowerCase().replace( /\ /gi, ‘_‘ ).replace( /[:.,\‘()%]/gi, ‘‘ ); 649 650 }, false ); 651 652 var id = data.id - 1; 653 var x = id % 32; 654 var y = Math.floor( id / 32 ); 655 656 var span = document.createElement( ‘span‘ ); 657 span.className = ‘image‘; 658 span.style.backgroundPosition = ‘-‘ + ( x * 32 ) + ‘px -‘ + ( y * 32 ) + ‘px‘; 659 div.appendChild( span ); 660 661 var text = document.createElement( ‘div‘ ); 662 text.innerHTML = data.name + ‘<br>‘; 663 text.innerHTML += ‘<span style="color:#606060">‘ + data.timestamp + ‘</spa><br>‘; 664 text.innerHTML += ‘<a href="http://www.mamicode.com/‘ + data.link + ‘" target="_blank"><img src="http://www.mamicode.com/files/link.png" style="margin-top:1px"></a>‘; // ‘ + data.link.replace( /http:\/\//gi, ‘‘ ) + 665 div.appendChild( text ); 666 667 divs[ data.id ] = div; 668 669 return div; 670 671 } 672 673 function loadProject( data ) { 674 675 if ( selected ) { 676 677 selected.className = ‘project‘; 678 679 } 680 681 selected = divs[ data.id ]; 682 selected.className = ‘project selected‘; 683 684 document.title = ‘Mr.doob | ‘ + data.name; 685 iframe.src = data.link; 686 687 } 688 689 </script> 690 </body> 691 </html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。