三维云模拟Three.js
2020-12-13 03:47
标签：style blog class code java c 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.doobtitle>
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
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>