三维云模拟Three.js
http://www.mrdoob.com/#/131/clouds
http://www.webgl.com/2012/03/webgl-demo-clouds/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mr.doob</title>
<style> html { height: 100%; } body { margin: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
background-color: #000000;
overflow: hidden; } #nav { background: linear-gradient(to bottom, #000000 50%,#1d1d1d 97%,#333333 97%);
width: 100%;
height: 61px;
overflow: hidden; } .project { -webkit-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-moz-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-ms-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-o-transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transition: width 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */ /*
-webkit-box-shadow: 0px 0px 20px 0px #000000;
-moz-box-shadow: 0px 0px 20px 0px #000000;
box-shadow: 0px 0px 20px 0px #000000;
*/ position: relative; width: 20px;
height: 61px; float: left;
/* padding: 12px 0px;*/ cursor: pointer; overflow: hidden; } .project .image { position: absolute;
top: 12px;
border: 2px solid #ffffff;
width: 32px;
height: 32px;
background-color: #000000;
background-image: url('files/projects/thumbnails.png'); } .project div { position: absolute; left: 42px;
top: 11px;
width: 132px; color: #ffffff;
font-weight: bold;
font-size: 9px;
line-height: 13px; } .project:hover { -webkit-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */ width: 45px; } .project.selected { -webkit-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
-o-transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
transition: width 0.5s cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */ width: 180px; } .project.selected:hover { width: 180px; } #viewer { position: absolute;
width: 100%;
top: 61px;
bottom: 0px; } </style>
</head>
<body> <script src="http://cdn.webglstats.com/stat.js" defer="defer" async="async"></script> <div id="nav">
<map name="logo">
<area shape="rect" href="/" coords="12,13,91,32" alt="Mr.doob" />
<area shape="rect" href="http://ricardocabello.com/blog" coords="12,32,44,46" alt="Blog" />
<area shape="rect" href="http://twitter.com/mrdoob" coords="47,32,88,46" alt="Twitter" />
</map>
<img src="files/showcase/logo.png" alt="logo" width="105" style="float:left" usemap="#logo" /> <!-- <a href="/blog"><img src="files/showcase/more.png" width="60" style="float:left" /></a> -->
</div> <div id="viewer">
<iframe id="iframe" style="border:0;width:100%;height:100%"></iframe>
</div> <script> var data = [ {
"id": 154,
"category": 1,
"name": "Kinecdysis Writer",
"timestamp": "2014/04/23",
"link": "http://kinecdysis.sougwen.com/"
}, {
"id": 153,
"category": 1,
"name": "Sporel",
"timestamp": "2013/12/24",
"link": "http://christmasexperiments.com/2013/24/"
}, {
"id": 152,
"category": 1,
"name": "Obsidian",
"timestamp": "2013/07/28",
"link": "/files/temp/xplsv_obsidian/"
}, {
"id": 151,
"category": 1,
"name": "Translucent Network",
"timestamp": "2013/05/28",
"link": "http://www.thebeautybehindit.com/secure/"
}, {
"id": 150,
"category": 2,
"name": "Beach Balls",
"timestamp": "2013/03/24",
"link": "/lab/javascript/beachballs/"
}, /*
{
"id": 149,
"category": 1,
"name": "Just Vined",
"timestamp": "2013/01/27",
"link": "http://justvined.com" },
*/ {
"id": 148,
"category": 1,
"name": "Aaronetrope",
"timestamp": "2012/10/15",
"link": "http://www.aaronkoblin.com/Aaronetrope/",
"link_info": "https://plus.google.com/113862800338869870683/posts/Q3KrZwohayB"
}, {
"id": 147,
"category": 2,
"name": "Google Space",
"timestamp": "2012/10/15",
"link": "/projects/chromeexperiments/google-space/"
}, {
"id": 146,
"category": 2,
"name": "HTML Editor",
"timestamp": "2012/09/02",
"link": "/projects/htmleditor/"
}, {
"id": 145,
"category": 2,
"name": "Webcam Displacement",
"timestamp": "2012/08/25",
"link": "/lab/javascript/webcam/displace/"
}, {
"id": 144,
"category": 2,
"name": "Magic dust",
"timestamp": "2012/07/31",
"link": "/lab/javascript/webgl/particles/magicdust.html"
},
/*
{
"id": 143,
"category": 2,
"name": "DAT particles (thanks zz85)",
"timestamp": "2012/07/31",
"link": "/lab/javascript/webgl/particles/particles_zz85_1m.html"
},
*/
{
"id": 142,
"category": 2,
"name": "Winning Solitaire",
"timestamp": "2012/05/07",
"link": "/lab/javascript/effects/solitaire/"
},
/*
{
"id": 141,
"category": 2,
"name": "IE with WebGL",
"timestamp": "2012/05/03",
"link": "/lab/javascript/webgl/ie/"
}, {
"id": 140,
"category": 1,
"name": "The Single Lane Superhighway",
"timestamp": "2011/12/07",
"link": "http://thesinglelanesuperhighway.com/"
},
*/
{
"id": 139,
"category": 1,
"name": "GLSL Sandbox",
"timestamp": "2011/11/09",
"link": "/projects/glsl_sandbox/"
}, {
"id": 138,
"category": 2,
"name": "Kinect",
"timestamp": "2011/10/30",
"link": "/lab/javascript/webgl/kinect/"
}, {
"id": 137,
"category": 2,
"name": "Voxels liquid",
"timestamp": "2011/10/17",
"link": "/lab/javascript/webgl/voxels_liquid/"
}, {
"id": 135,
"category": 2,
"name": "Sphere",
"timestamp": "2011/08/16",
"link": "/lab/javascript/webgl/sphere/"
}, {
"id": 134,
"category": 2,
"name": "Comments Audio Visualiser",
"timestamp": "2011/06/17",
"link": "/lab/javascript/commentsvisualiser/"
}, {
"id": 133,
"category": 1,
"name": "3 Dreams of Black",
"timestamp": "2011/05/12",
"link": "/projects/google/rome/redirect/"
}, {
"id": 132,
"category": 1,
"name": "WebGL Globe",
"timestamp": "2011/05/05",
"link": "/projects/google/globe/redirect/"
}, {
"id": 131,
"category": 2,
"name": "Clouds",
"timestamp": "2011/03/25",
"link": "/lab/javascript/webgl/clouds/"
}, {
"id": 130,
"category": 2,
"name": "Disturb",
"timestamp": "2010/12/11",
"link": "/lab/javascript/effects/disturb/"
}, {
"id": 129,
"category": 1,
"name": "Voxels",
"timestamp": "2010/11/06",
"link": "/projects/voxels/#A/bnciaTraheakhacTSiahfaotaiafUscierhoShahfShahfafiWheSheUeWSfafhchhefffchhWffahherhpfXTbdUhUhUhVihShaffahfahhcfhYhaffYhahhaeeUhahhahhcdfShYhYhafhUheffdafhcjhShYfYfahfYfahfYfafhcjhYeahfShShWhfVbfdjjhaffaffaffafhafhafhahhahhahhahfahfeehhahfahfaffaffafhafhahhWhfahhWhfWffahhefXhUhehffahiaddbnfffYhcmfrfsaaiU"
}, {
"id": 128,
"category": 2,
"name": "Internet Explorer 6",
"timestamp": "2010/10/07",
"link": "/lab/javascript/effects/ie6/"
}, {
"id": 127,
"category": 1,
"name": "The Wilderness Downtown",
"timestamp": "2010/08/30",
"link": "/projects/radicalmedia/arcadefire/redirect/"
}, {
"id": 126,
"category": 1,
"name": "Or so they say...",
"timestamp": "2010/07/25",
"link": "http://xplsv.com/prods/demos/xplsv_orsotheysay/",
"link_info": "/blog/post/702"
}, {
"id": 125,
"category": 1,
"name": "Multiuser Sketchpad",
"timestamp": "2010/07/7",
"link": "/projects/multiuserpad/",
"link_info": "/blog/post/701"
}, {
"id": 124,
"category": 2,
"name": "Plane Deformations",
"timestamp": "2010/06/12",
"link": "/lab/javascript/effects/plane_deformations/",
"link_info": "/blog/post/699"
}, {
"id": 123,
"category": 2,
"name": "Water Type",
"timestamp": "2010/06/4",
"link": "/lab/javascript/effects/water/02/",
"link_info": "/blog/post/696"
}, {
"id": 122,
"category": 1,
"name": "Three.js",
"timestamp": "2010/04/23",
"link": "http://threejs.org/",
"link_info": "/blog/post/693"
}, {
"id": 120,
"category": 1,
"name": "Harmony",
"timestamp": "2010/03/08",
"link": "/projects/harmony/",
"link_info": "/blog/post/689"
}, {
"id": 119,
"category": 2,
"name": "Zoom blur",
"timestamp": "2010/03/08",
"link": "/lab/javascript/effects/zoomblur/03/"
}, {
"id": 118,
"category": 2,
"name": "Rotozoomer",
"timestamp": "2010/02/26",
"link": "/lab/javascript/effects/rotozoomer/00/"
}, {
"id": 117,
"category": 2,
"name": "Fire",
"timestamp": "2010/02/15",
"link": "/lab/javascript/effects/fire/01/"
}, {
"id": 116,
"category": 2,
"name": "Water Remix",
"timestamp": "2010/02/11",
"link": "/lab/javascript/effects/water/01/"
}, {
"id": 115,
"category": 2,
"name": "Water",
"timestamp": "2010/02/11",
"link": "/lab/javascript/effects/water/00/"
}, {
"id": 99,
"category": 2,
"name": "Branching",
"timestamp": "2009/11/29",
"link": "/lab/javascript/effects/branching/02/",
"link_info": "/blog/post/680"
}, {
"id": 112,
"category": 2,
"name": "Branching",
"timestamp": "2009/11/29",
"link": "/lab/javascript/effects/branching/01_spite_mrdoob/",
"link_info": "/blog/post/680"
}, {
"id": 111,
"category": 2,
"name": "Branching",
"timestamp": "2009/11/29",
"link": "/lab/javascript/effects/branching/01/",
"link_info": "/blog/post/680"
}, {
"id": 110,
"category": 2,
"name": "Branching",
"timestamp": "2009/11/29",
"link": "/lab/javascript/effects/branching/00/",
"link_info": "/blog/post/680"
}, {
"id": 98,
"category": 2,
"name": "3D Waveform",
"timestamp": "2009/11/09",
"link": "/lab/javascript/webgl/waveform/",
"link_info": "/blog/post/677"
}, {
"id": 107,
"category": 2,
"name": "Strange Attractor",
"timestamp": "2009/11/04",
"link": "/lab/javascript/strangeattractor/"
}, {
"id": 106,
"category": 2,
"name": "Checkbox Painter",
"timestamp": "2009/11/04",
"link": "/lab/javascript/checkbox_painter/"
}, {
"id": 105,
"category": 2,
"name": "Checkboxes Ball",
"timestamp": "2009/11/04",
"link": "/lab/javascript/checkboxes/"
}, {
"id": 103,
"category": 1,
"name": "60fps",
"timestamp": "2009/09/10",
"link": "http://60fps.com"
}, {
"id": 97,
"category": 2,
"name": "Depth of Field",
"timestamp": "2009/06/10",
"link": "/projects/chromeexperiments/depth_of_field/"
}, {
"id": 96,
"category": 1,
"name": "Google Sphere",
"timestamp": "2009/05/28",
"link": "/projects/chromeexperiments/google-sphere/"
}, {
"id": 92,
"category": 1,
"name": "Google Gravity",
"timestamp": "2009/03/18",
"link": "/projects/chromeexperiments/google-gravity/",
"link_info": "/blog/post/644"
}, {
"id": 91,
"category": 1,
"name": "Ball Pool",
"timestamp": "2009/02/12",
"link": "/projects/chromeexperiments/ball-pool/",
"link_info": "/blog/post/644"
}, {
"id": 83,
"category": 1,
"name": "Youtube, now in Super HD!",
"timestamp": "2008/09/30",
"link": "/lab/youtube/superHD/",
"link_info": "/blog/post/597"
} ]; var nav = document.getElementById( 'nav' );
var viewer = document.getElementById( 'viewer' );
var iframe = document.getElementById( 'iframe' ); var selected, divs = {}; init(); function init () { buildNav( data ); if ( window.location.hash ) { var hash = window.location.hash.substr( 1 ); var id = hash.split('/')[1]; for ( var i in data ) { if ( data[ i ].id == id ) { loadProject( data[ i ] );
break; } } } else { loadProject( data[ 0 ] ); } window.addEventListener( 'popstate', function ( event ) { if ( event.state != null ) loadProject( event.state ); }, false ); }; function buildNav( projects ) { for ( var i in projects ) { nav.appendChild( buildProject( projects[ i ] ) ); } } function buildProject( data ) { var div = document.createElement( 'div' );
div.className = 'project';
div.addEventListener( 'click', function ( event ) { loadProject( data );
window.location.hash = '/' + data.id + '/' + data.name.toLowerCase().replace( /\ /gi, '_' ).replace( /[:.,\'()%]/gi, '' ); }, false ); var id = data.id - 1;
var x = id % 32;
var y = Math.floor( id / 32 ); var span = document.createElement( 'span' );
span.className = 'image';
span.style.backgroundPosition = '-' + ( x * 32 ) + 'px -' + ( y * 32 ) + 'px';
div.appendChild( span ); var text = document.createElement( 'div' );
text.innerHTML = data.name + '<br>';
text.innerHTML += '<span style="color:#606060">' + data.timestamp + '</spa><br>';
text.innerHTML += '<a href="' + data.link + '" target="_blank"><img src="files/link.png" style="margin-top:1px"></a>'; // ' + data.link.replace( /http:\/\//gi, '' ) +
div.appendChild( text ); divs[ data.id ] = div; return div; } function loadProject( data ) { if ( selected ) { selected.className = 'project'; } selected = divs[ data.id ];
selected.className = 'project selected'; document.title = 'Mr.doob | ' + data.name;
iframe.src = data.link; } </script>
</body>
</html>
三维云模拟Three.js的更多相关文章
- [LiDAR数据模拟]系列(2) HELIOS的TLS点云模拟流程
关键词:地基激光雷达 点云模拟 XML文件 作者:李二 日期:07/05/2020 - 08/05/2020 我目前仅仅使用了TLS模式进行模拟,所以先讲一下TLS的模拟经验. ALS和MLS的模拟, ...
- 词云（wordcloud2.js js2wordcloud.js）
npm安装: npm install js2wordcloud --save 用法 var wc = new Js2WordCloud(document.getElementById('contain ...
- 【Nodejs】392- 基于阿里云的 Node.js 稳定性实践
前言 如果你看过 2018 Node.js 的用户报告,你会发现 Node.js 的使用有了进一步的增长,同时也出现了一些新的趋势. Node.js 的开发者更多的开始使用容器并积极的拥抱 Serve ...
- 阿里云部署Node.js项目（CentOS）
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,用来方便地搭建快速的易于扩展的网络应用.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又 ...
- 基于Apache的阿里云部署Node.js服务器(Windows环境)
1 前言 由于nodejs项目对方开放了多个端口,而且阿里云上的Apache服务器(windows)已经挂载了网站,此时需要把此项目也挂上去,网上查询资料,方法略少,基本是基于nginx版本的. 2 ...
- 海康威视 - 萤石云开放平台 js 版
开放平台 https://open.ys7.com/mobile/download.html API http://open.ys7.com/doc/zh/uikit/uikit_javascript ...
- PhantomJS 和Selenium模拟页面js点击
由于自己不怎么会javascripts,无法找全所有的参数进行模拟提交,所以只能寻求Selenium和PhantpmJS的方式. 先说下ubuntu上怎么安装相应的环境,尤其PhantomJS安装比较 ...
- 基于Babylon.js编写宇宙飞船模拟程序1——程序基础结构、物理引擎使用、三维罗盘
计划做一个宇宙飞船模拟程序,首先做一些技术准备. 可以访问https://ljzc002.github.io/test/Spacetest/HTML/PAGE/spacetestwp2.html查看测 ...
- 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课
开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...
随机推荐
- gRPC Client的负载均衡器
一.gRPC是什么? gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协 ...
- python分片
刚刚学习,很新 >>> numbers = [1,2,3,4,5,6,7,8,9,10] >>> numbers[0:10:2] [1,3,5,7,9] >& ...
- [css filter]filter在界面实现滤镜效果
最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色 肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠) ...
- JavaWeb之 JSP:内置对象，EL表达式，JSP标签基础
JSP的内置对象 什么是JSP的内置对象呢? 在JSP页面进行编程的时候,如果我们要使用一些对象,如:HttpSession,ServletConfig,ServletContext这些对象,如果每次 ...
- EMVTag系列10《发卡行公钥证书》
Ø 90 发卡行公钥(IPK)证书 L: NCA -C(有条件):如果支持SDA,DDA CA认证过的发卡行公钥.用于脱机数据认证 Ø 9F32 发卡行公钥指数 L: 1 or 3 -C( ...
- android开发图片分辨率问题解决方案
dpi是什么呢? dpi是“dot per inch”的缩写,每英寸像素数. 四种密度分类: ldpi (low), mdpi (medium), hdpi (high), and xhdpi (ex ...
- Windows下使用Visual Studio Code搭建Go语言环境
1.安装GO语言 下载地址: https://golang.org/dl/ Windows下直接运行安装GO语言即可. 安装成功. 安装完毕GO语言后,需要添加GOPATH环 ...
- OC中NSDictionary（字典）、NSMutableDictionary（可变字典）、NSSet（集合）、NSMutableSet（可变集合）得常用方法
字典用于保存具有映射关系数据的集合 一个key—value对认为是一个条目(entry),字典是存储key—value对的容器 与数组不同,字典靠key存取元素 key不能重复,value必须是对象 ...
- ExtJS 等待两个/多个store加载完再执行操作的方法
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作 ...
- c/c++常用代码--string trim
typedef std::basic_string<TCHAR> tstring; inline static void trim(tstring& s){ s.erase( ...