source: other-projects/nz-flag-design/trunk/render-3d/flag.html@ 29634

Last change on this file since 29634 was 29634, checked in by bmt11, 9 years ago

All weather is now functioning including switching back to fine weather. Weather is now also affected by wind force
File size: 13.2 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
6 <title>three.js webgl - 3D Flag hhh</title>
7 <meta charset="utf-8">
8 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
9 <head>
10 <link rel="stylesheet" type="text/css" href="CSS/button.css">
11 <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
12 <style>
13 body {
14 font-family: Monospace;
15 background-color: #000;
16 color: #000;
17 margin: 0px;
18 overflow: hidden;
19 position: fixed;
20 }
21
22 #menuContainer{
23 position: fixed;
24 right: -18vw;
25 float: right;
26 width: 25vw;
27 transition: right 0.5s;
28 background-image: url("./images/slider.png");
29 background-size: cover;
30 background-position: center;
31 }
32
33 #weatherMenu {
34 text-align: center;
35 padding: 0px;
36 width: 20vw;
37 z-index: 10;
38 height: 100vh;
39 position: relative;
40 float: right;
41 }
42
43 #arrow{
44 float: left;
45 background-image: url("./images/arrow.png");
46 background-position: center;
47 background-size: cover;
48 background-repeat: no-repeat;
49 margin: auto;
50 right: 1vw;
51 width: 5vw;
52 height: 5vw;
53 position: relative;
54 border-radius: 100%;
55 top: 45vh;
56 z-index: 9;
57 transition: transform 0.5s;
58 transform: rotate(360deg);
59 }
60
61 </style>
62 <style type="text/css"></style></head>
63
64 <body>
65 <div id="menuContainer">
66 <div id="weatherMenu" style="color : white">
67 <!--Toggle:
68 <a onclick="wind = !wind;">Wind</a> |-->
69 <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
70 <a class="myButton" style="background-image:url('./images/rainButton.jpg')" onclick="raining = !raining;"></a>
71 <a class="myButton" style="background-image:url('./images/snowButton.jpg')" onclick="snowing = !snowing;"></a>
72 </div>
73 <div id="arrow" onclick="openclose()">
74 </div>
75 </div>
76
77
78 <script type="text/javascript">
79 var open = false;
80 function openclose(){
81 if (open){
82 document.getElementById("menuContainer").style.right = "-19vw";
83 document.getElementById("arrow").style.transform = "rotate(360deg)";
84 }else{document.getElementById("menuContainer").style.right = "0vw";
85 document.getElementById("arrow").style.transform = "rotate(180deg)";
86 }
87 open = !open;
88
89 }
90 </script>
91
92 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
93 <script type="text/javascript" src="../js/jquery.cookie.js"></script>
94
95 <script type="text/javascript" src="./Flag_files/Three.js"></script>
96 <script type="text/javascript" src="./Flag_files/Detector.js"></script>
97 <script type="text/javascript" src="./Flag_files/Stats.js"></script>
98 <script type="text/javascript" src="./Flag_files/Flag.js"></script>
99 <script type="text/javascript" src="./Flag_files/OrbitControls.js"></script>
100 <script type="text/javascript" src="./weather/weather.js"></script>
101 <script type="text/javascript" src="./weather/rain.js"></script>
102 <script type="text/javascript" src="./weather/snow.js"></script>
103 <script type="text/javascript" src="./weather/sun.js"></script>
104
105 <script type="text/javascript" src="./Flag_files/KeyboardState.js"></script>
106
107 <script type="x-shader/x-fragment" id="fragmentShaderDepth">
108
109 uniform sampler2D texture;
110 varying vec2 vUV;
111
112 vec4 pack_depth( const in float depth ) {
113
114 const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
115 const vec4 bit_mask = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
116 vec4 res = fract( depth * bit_shift );
117 res -= res.xxyz * bit_mask;
118 return res;
119
120 }
121
122 void main() {
123
124 vec4 pixel = texture2D( texture, vUV );
125
126 if ( pixel.a < 0.5 ) discard;
127
128 gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
129
130 }
131 </script>
132
133 <script type="x-shader/x-vertex" id="vertexShaderDepth">
134
135 varying vec2 vUV;
136
137 void main() {
138
139 vUV = 0.75 * uv;
140
141 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
142
143 gl_Position = projectionMatrix * mvPosition;
144
145 }
146
147 </script>
148
149 <script type="text/javascript">
150 var keyboard = new KeyboardState();
151 var clothTextures = [];
152
153 var initial = true;
154
155 var pins = [];
156 for (var j=0;j<=cloth.h;j++){
157 pins.push(cloth.index(0, j));
158 }
159 /* Light variables */
160 var light;
161
162 /* Weather variables */
163 var weatherSystem;
164
165 var raining = false;
166 var snowing = false;
167 var sunny = false;
168
169 var snowSystem;
170 var rainSystem;
171 var sunSystem;
172
173 /* Mouse variables */
174 var mouseX;
175 var mouseY;
176 var clickPos = '';
177 var mouseDown = false;
178
179 if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
180
181 var container, stats;
182 var camera, scene, renderer;
183
184 var cameraRot = 90;
185 var cameraElevation = 0;
186 var controls;
187
188 var clothGeometry;
189
190 var object, tmpFlag, arrow;
191
192
193 var rotate = false;
194
195 // array for holding existing flags
196
197 var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
198 var flagSelector = 0;
199 var materials;
200 var vertexShader;
201 var fragmentShader;
202 var uniforms;
203
204 init();
205 animate();
206
207 function init() {
208
209 container = document.createElement( 'div' );
210 document.body.appendChild( container );
211
212
213
214 // scene
215
216 scene = new THREE.Scene();
217
218 scene.fog = new THREE.Fog( 0x404040, 500, 10000 );
219 scene.fog.color.setHSL( 0.1, 0.1, 0.8 );
220
221 // camera
222
223 camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
224 camera.position.y = 50;
225 camera.position.z = 1500;
226 scene.add( camera );
227 controls = new THREE.OrbitControls( camera );
228 controls.addEventListener( 'change', render );
229
230 // lights
231
232 scene.add( new THREE.AmbientLight( 0x404040 ) );
233
234 light = new THREE.DirectionalLight( 0xffffff, 1 );
235 light.color.setHSL( 0.6, 0.125, 1 );
236 light.position.set( 50, 200, 100 );
237 light.position.multiplyScalar( 1.3 );
238
239 light.castShadow = true;
240 light.shadowCameraVisible = false;
241
242 light.shadowMapWidth = 2048;
243 light.shadowMapHeight = 2048;
244
245 var d = 200;
246
247 light.shadowCameraLeft = -d;
248 light.shadowCameraRight = d;
249 light.shadowCameraTop = d;
250 light.shadowCameraBottom = -d;
251
252 light.shadowCameraFar = 1000;
253 light.shadowDarkness = 0.5;
254
255 scene.add( light );
256
257 /*light = new THREE.DirectionalLight( 0xffffff, 1.25 );
258 light.color.setHSL( 0.3, 0.95, 1 );
259 light.position.set( 0, -1, 0 );*/
260
261 //scene.add( light );
262
263 /* Weather init */
264
265 rainSystem = new rain();
266 snowSystem = new snow();
267 sunSystem = new sun();
268 weatherSystem = new weatherSystem(scene);
269
270 /* ------------------ */
271
272 var session_id = $.cookie('JSESSIONID');
273 if (session_id) {
274 flags[0] = "images/flag-" + session_id + ".png";
275 }
276
277 // load flag textures
278 var i;
279
280 for(i = 0; i < flags.length; i++){
281 clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
282 //clothTextures[i].needsUpdate = true;
283 clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
284 clothTextures[i].anisotropy = 16;
285 }
286 createFlag();
287
288 // weather
289
290 // arrow
291
292 arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
293 arrow.position.set( -200, -50, -200 );
294 arrow.setLength( 0 );
295 arrow.setDirection( 0 );
296 //scene.add( arrow );
297
298
299
300 // ground
301
302 var initColor = new THREE.Color( 0x00ff00 );
303 initColor.setHSL( 0.3, 0.85, 0.8 );
304 var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
305
306 var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
307
308 var groundTexture = THREE.ImageUtils.loadTexture( "./images/grass.jpg", undefined, function() { groundMaterial.map = groundTexture } );
309 groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
310 groundTexture.repeat.set( 32, 32 );
311 groundTexture.anisotropy = 16;
312
313 var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
314 mesh.position.y = -250;
315 mesh.rotation.x = - Math.PI / 2;
316 mesh.receiveShadow = true;
317 scene.add( mesh );
318
319 // poles
320
321 var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
322 var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
323
324 var mesh = new THREE.Mesh( poleGeo, poleMat );
325 mesh.position.y = -25; //-250
326 mesh.position.x = 0;
327 mesh.receiveShadow = true;
328 mesh.castShadow = false;
329 scene.add( mesh );
330
331
332 var gg = new THREE.BoxGeometry( 10, 10, 10 );
333 var mesh = new THREE.Mesh( gg, poleMat );
334 mesh.position.y = -250;
335 mesh.position.x = 0; //125
336 mesh.receiveShadow = true;
337 mesh.castShadow = false;
338 scene.add( mesh );
339
340
341 //
342 renderer = new THREE.WebGLRenderer( { antialias: true } );
343 renderer.setSize( window.innerWidth, window.innerHeight );
344 renderer.setClearColor( scene.fog.color );
345
346 container.appendChild( renderer.domElement );
347
348 renderer.gammaInput = true;
349 renderer.gammaOutput = true;
350 renderer.physicallyBasedShading = true;
351
352 renderer.shadowMapEnabled = true;
353
354 //
355
356 stats = new Stats();
357 stats.domElement.style.position = 'absolute';
358 stats.domElement.style.top = '0px';
359 container.appendChild( stats.domElement );
360
361 stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
362 stats.domElement.children[ 0 ].style.background = "transparent";
363 stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
364
365 //
366
367 window.addEventListener( 'resize', onWindowResize, false );
368
369 }
370
371 //
372 var flag_toggle = 0;
373
374 function createFlag(flagFilename) {
375 if (flagFilename) {
376 flags[0] = "./images/" + flagFilename;
377 }
378
379 if(initial){
380
381 // create materials
382 materials = [
383 new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
384 ];
385
386 // cloth geometry
387
388 clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
389 clothGeometry.dynamic = true;
390 clothGeometry.computeFaceNormals();
391
392 uniforms = { texture: { type: "t", value: 0, texture: clothTextures[0] } };
393 vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
394 fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
395
396 // cloth mesh
397 object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
398 object.position.set( 0, 150, 0 );
399 object.castShadow = false;
400 object.receiveShadow = false;
401 object.material.transparent = true;
402 object.material.opacity = 0.85;
403 scene.add( object );
404 initial = false;
405 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
406
407 }else{
408 clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
409 object.material.map = clothTextures[flagSelector];
410 object.material.needsUpdate = true;
411 }
412
413 }
414
415
416 //
417
418 function onWindowResize() {
419
420 camera.aspect = window.innerWidth / window.innerHeight;
421 camera.updateProjectionMatrix();
422
423 renderer.setSize( window.innerWidth, window.innerHeight );
424
425 }
426
427 //
428
429 function animate() {
430
431 requestAnimationFrame( animate );
432
433 var time = Date.now();
434
435 windStrength = Math.cos( time / 7000 ) * 100 + 200;
436 windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
437 arrow.setLength( windStrength );
438 arrow.setDirection( windForce );
439
440 controls.update();
441 simulate(time);
442 render();
443 stats.update();
444
445 }
446
447 function render() {
448
449
450 var timer = Date.now() * 0.0002;
451
452 keyboard.update();
453 if( keyboard.down("A")) {
454 flagSelector--;
455 if(flagSelector < 0) flagSelector = flags.length-1;
456 createFlag();
457
458 }else if(keyboard.down("D")) {
459 flagSelector++;
460 if(flagSelector >= flags.length) flagSelector = 0;
461 createFlag();
462 }
463
464 var p = cloth.particles;
465 for ( var i = 0, il = p.length; i < il; i ++ ) {
466
467 clothGeometry.vertices[ i ].copy( p[ i ].position );
468
469 }
470
471 clothGeometry.computeFaceNormals();
472 clothGeometry.computeVertexNormals();
473
474 clothGeometry.normalsNeedUpdate = true;
475 clothGeometry.verticesNeedUpdate = true;
476
477
478
479 if(raining && weatherSystem.type != rainSystem){
480 snowing = false;
481 sunny = false;
482 weatherSystem.swap(rainSystem);
483 }else if(snowing && weatherSystem.type != snowSystem){
484 raining = false;
485 sunny = false;
486 weatherSystem.swap(snowSystem);
487 }else if(sunny && weatherSystem.type != sunSystem){
488 raining = false;
489 snowing = false;
490 weatherSystem.swap(sunSystem);
491 }
492
493 if(weatherSystem.isSet() === true){
494 weatherSystem.update();
495 }
496
497 camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+150, scene.position.z) );
498
499 renderer.render( scene, camera );
500
501 }
502
503 </script><div><canvas width="1366" height="600"></canvas>
504</body></html>
Note: See TracBrowser for help on using the repository browser.