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

Last change on this file was 29981, checked in by davidb, 9 years ago

Page now can support a CGI parameter for specifying a published flag to show (flagID=)
File size: 16.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>3D Representation of Flag</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: transparent;
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 </head>
63
64 <body>
65
66 <!----------------------------- Weather Menu ----------------------------------->
67 <!------------------------------------------------------------------------------>
68
69 <div id="menuContainer">
70
71 <div id="weatherMenu">
72 <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
73 <a class="myButton" style="background-image:url('./images/rainButton.jpg')" onclick="raining = !raining;"></a>
74 <a class="myButton" style="background-image:url('./images/snowButton.jpg')" onclick="snowing = !snowing;"></a>
75 </div>
76
77 <div id="arrow" onclick="openclose()"></div>
78
79 </div>
80
81 <!------------------------------------------------------------------------------>
82 <!------------------------------------------------------------------------------>
83
84
85
86 <!-------------------------- Wind Speed Control -------------------------------->
87 <!------------------------------------------------------------------------------>
88
89 <div id="slider">
90 <div id="speed"></div>
91 </div>
92
93 <link rel="stylesheet" href="./CSS/slider.css" />
94
95 <!------------------------------------------------------------------------------>
96 <!------------------------------------------------------------------------------>
97
98
99
100 <!----------------- Opening of the weather menu -------------------------------->
101 <!----------------- slides out from right to left ------------------------------>
102 <script type="text/javascript">
103 var open = false;
104
105 function openclose(){
106 if (open){
107 document.getElementById("menuContainer").style.right = "-19vw";
108 document.getElementById("arrow").style.transform = "rotate(360deg)";
109 }else{document.getElementById("menuContainer").style.right = "0vw";
110 document.getElementById("arrow").style.transform = "rotate(180deg)";
111 }
112 open = !open;
113 }
114 </script>
115 <!------------------------------------------------------------------------------>
116 <!------------------------------------------------------------------------------>
117
118
119 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
120 <script type="text/javascript" src="../js/jquery.cookie.js"></script>
121
122 <script type="text/javascript" src="./Flag_files/Three.js"></script>
123 <script type="text/javascript" src="./Flag_files/Detector.js"></script>
124 <script type="text/javascript" src="./Flag_files/Stats.js"></script>
125 <script type="text/javascript" src="./Flag_files/Flag.js"></script>
126 <script type="text/javascript" src="./Flag_files/OrbitControls.js"></script>
127 <script type="text/javascript" src="./weather/weather.js"></script>
128 <script type="text/javascript" src="./weather/rain.js"></script>
129 <script type="text/javascript" src="./weather/snow.js"></script>
130 <script type="text/javascript" src="./weather/sun.js"></script>
131 <script type="text/javascript" src="./Flag_files/ColladaLoader.js"></script>
132 <script type="text/javascript" src="./Flag_files/slider.js"></script>
133 <script type="text/javascript" src="./Flag_files/Projector.js"></script>
134
135 <script type="text/javascript" src="./Flag_files/KeyboardState.js"></script>
136
137 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
138
139 <script type="x-shader/x-fragment" id="fragmentShaderDepth">
140
141 uniform sampler2D texture;
142 varying vec2 vUV;
143
144 vec4 pack_depth( const in float depth ) {
145
146 const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
147 const vec4 bit_mask = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
148 vec4 res = fract( depth * bit_shift );
149 res -= res.xxyz * bit_mask;
150 return res;
151
152 }
153
154 void main() {
155
156 vec4 pixel = texture2D( texture, vUV );
157
158 if ( pixel.a < 0.5 ) discard;
159
160 gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
161
162 }
163 </script>
164
165 <script type="x-shader/x-vertex" id="vertexShaderDepth">
166
167 varying vec2 vUV;
168
169 void main() {
170
171 vUV = 0.75 * uv;
172
173 vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
174
175 gl_Position = projectionMatrix * mvPosition;
176
177 }
178
179 </script>
180
181 <script type="text/javascript">
182
183
184
185 function getURLParameter(name) {
186 return decodeURI(
187 (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
188 }
189
190
191 var keyboard = new KeyboardState();
192 var clothTexture;
193
194 var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
195 var objects = [];
196 var beehiveVisible = true;
197
198 var initial = true;
199
200 var pins = [];
201 for (var j=0;j<=cloth.h;j++){
202 pins.push(cloth.index(0, j));
203 }
204 /* Light variables */
205 var light;
206
207 /* Weather variables */
208 var weatherSystem;
209
210 var raining = false;
211 var snowing = false;
212 var sunny = false;
213 var visible = true;
214
215 var snowSystem;
216 var rainSystem;
217 var sunSystem;
218
219 /* Mouse variables */
220 var mouseX;
221 var mouseY;
222 var clickPos = '';
223 var mouseDown = false;
224
225 if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
226
227 var container, stats;
228 var camera, scene, renderer;
229
230 var cameraRot = 90;
231 var cameraElevation = 0;
232 var controls;
233
234 var clothGeometry;
235
236 var object, tmpFlag, arrow;
237
238
239 var rotate = false;
240
241 // array for holding existing flags
242
243 var flag = "./images/flag.png";//, "./images/flag2.png", "./images/canada.png"];
244 var flagSelector = 0;
245 var materials;
246 var vertexShader;
247 var fragmentShader;
248 var uniforms;
249
250 init();
251 animate();
252
253 function init() {
254
255 container = document.createElement( 'div' );
256 document.body.appendChild( container );
257
258 windStrength = 250;
259
260 // scene
261
262 scene = new THREE.Scene();
263
264 scene.fog = new THREE.Fog( 0x404040, 1000, 14000 );
265 scene.fog.color.setHSL( 0.1, 0.1, 0.8 );
266
267 // camera
268
269 camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
270 camera.position.y = 1500;
271 camera.position.z = 2500;
272 camera.position.x = 2500;
273 scene.add( camera );
274 controls = new THREE.OrbitControls( camera );
275 controls.addEventListener( 'change', render );
276
277 // lights
278
279 scene.add( new THREE.AmbientLight( 0x404040 ) );
280
281 light = new THREE.DirectionalLight( 0xffffff, 1 );
282 light.color.setHSL( 0.6, 0.125, 1 );
283 light.position.set( 50, 200, 100 );
284 light.position.multiplyScalar( 1.3 );
285
286 light.castShadow = true;
287 light.shadowCameraVisible = false;
288
289 light.shadowMapWidth = 2048;
290 light.shadowMapHeight = 2048;
291
292 var d = 200;
293
294 light.shadowCameraLeft = -d;
295 light.shadowCameraRight = d;
296 light.shadowCameraTop = d;
297 light.shadowCameraBottom = -d;
298
299 light.shadowCameraFar = 1000;
300 light.shadowDarkness = 0.5;
301
302 scene.add( light );
303
304 /*light = new THREE.DirectionalLight( 0xffffff, 1.25 );
305 light.color.setHSL( 0.3, 0.95, 1 );
306 light.position.set( 0, -1, 0 );*/
307
308 //scene.add( light );
309
310 /* Weather init */
311
312 rainSystem = new rain();
313 snowSystem = new snow();
314 sunSystem = new sun();
315 weatherSystem = new weatherSystem(scene);
316
317 /* ------------------ */
318
319 var flag_id = getURLParameter("flagID");
320 if (flag_id) {
321 flag = "../published/" + flag_id + "/myflag.png";
322 }
323 else {
324 var session_id = $.cookie('JSESSIONID');
325
326 if (session_id) {
327 flag = "images/flag-" + session_id + ".png";
328 }
329 }
330
331 // load flag textures
332
333 clothTexture = THREE.ImageUtils.loadTexture( flag );
334 clothTexture.wrapS = clothTexture.wrapT = THREE.ClampToEdgeWrapping;
335 clothTexture.anisotropy = 16;
336 createFlag();
337
338 // weather
339
340 // arrow
341
342 arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
343 arrow.position.set( -200, -50, -200 );
344 arrow.setLength( 0 );
345 arrow.setDirection( 0 );
346 //scene.add( arrow );
347
348
349
350 // ground
351
352 var initColor = new THREE.Color( 0x00ff00 );
353 initColor.setHSL( 0.3, 0.85, 0.8 );
354 var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
355
356 var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
357
358 var groundTexture = THREE.ImageUtils.loadTexture( "./images/grass.jpg", undefined, function() { groundMaterial.map = groundTexture } );
359 groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
360 groundTexture.repeat.set( 32, 32 );
361 groundTexture.anisotropy = 16;
362
363 var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
364 mesh.position.y = -250;
365 mesh.rotation.x = - Math.PI / 2;
366 mesh.receiveShadow = true;
367 scene.add( mesh );
368
369 // poles
370
371 var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
372 var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
373
374 var mesh = new THREE.Mesh( poleGeo, poleMat );
375 mesh.position.y = 1650; //-250
376 mesh.position.x = -305;
377 mesh.position.z = -165;
378 mesh.receiveShadow = true;
379 mesh.castShadow = false;
380 scene.add( mesh );
381 //objects.push( mesh );
382
383 //
384 renderer = new THREE.WebGLRenderer( { antialias: true } );
385 renderer.setSize( window.innerWidth, window.innerHeight );
386 renderer.setClearColor( scene.fog.color );
387
388 container.appendChild( renderer.domElement );
389
390 renderer.gammaInput = true;
391 renderer.gammaOutput = true;
392 renderer.physicallyBasedShading = true;
393
394 renderer.shadowMapEnabled = true;
395
396 //
397
398 /*stats = new Stats();
399 stats.domElement.style.position = 'absolute';
400 stats.domElement.style.top = '0px';
401 container.appendChild( stats.domElement );
402
403 stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
404 stats.domElement.children[ 0 ].style.background = "transparent";
405 stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";*/
406
407 //
408
409 window.addEventListener( 'resize', onWindowResize, false );
410
411
412 var loader = new THREE.ColladaLoader();
413 loader.load('./images/Beehive2.dae', function (result) {
414 var beehive = result.scene;
415 // var tex = beehive[ 0 ];
416
417 //beehive.material.needsUpdate = true;
418 // beehive.material.transparent = true;
419 //beehive.material.opacity = 0.5;
420 //console.log(beehive);
421 /*for( var i = 0; i < beehive.children[0].children.length; i++){
422 //beehive.children[0].children[i].material.side = THREE.DoubleSide;
423 }*/
424
425
426 beehive.position.set(-300,-250,-300);
427 beehive.scale.set(1,1,1);
428 beehive.rotation.set(1.5*Math.PI,0,0);
429 beehive.name = "beehive";
430 scene.add(beehive);
431 objects.push( beehive );
432 });
433 projector = new THREE.Projector();
434 document.addEventListener( 'mousedown', onDocumentMouseDown, false );
435 }
436
437 //
438 var flag_toggle = 0;
439
440 function createFlag(flagFilename) {
441 if (flagFilename) {
442 flag = "./images/" + flagFilename;
443 }
444
445 if(initial){
446
447 // create materials
448 materials = [
449 new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTexture, side: THREE.DoubleSide } ),
450 ];
451
452 // cloth geometry
453
454 clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
455 clothGeometry.dynamic = true;
456 clothGeometry.computeFaceNormals();
457
458 uniforms = { texture: { type: "t", value: 0, texture: clothTexture } };
459 vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
460 fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
461
462 // cloth mesh
463 object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
464 object.position.set( 0, 150, 0 );
465 object.castShadow = false;
466 object.receiveShadow = false;
467 object.material.transparent = true;
468 object.material.opacity = 0.85;
469 object.position.y = 1800;
470 object.position.x = -305;
471 object.position.z = -165;
472 object.name = "flag";
473 scene.add( object );
474 objects.push( object );
475
476 initial = false;
477 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
478
479 }else{
480 clothTexture = THREE.ImageUtils.loadTexture( flag+'?'+Date.now() );
481 object.material.map = clothTexture;
482 object.material.needsUpdate = true;
483 }
484
485 }
486
487 function onDocumentMouseDown( event ) {
488
489 var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, //x
490 -( event.clientY / window.innerHeight ) * 2 + 1, //y
491 1 ); //z
492 mouse3D.unproject( camera );
493 mouse3D.sub( camera.position );
494 mouse3D.normalize();
495 var raycaster = new THREE.Raycaster( camera.position, mouse3D );
496 var intersects = raycaster.intersectObjects( objects , true);
497 if(intersects.length > 0){
498 beehiveVisible = false;
499 //intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
500 }
501 }
502
503
504 //
505
506 function onWindowResize() {
507
508 camera.aspect = window.innerWidth / window.innerHeight;
509 camera.updateProjectionMatrix();
510
511 renderer.setSize( window.innerWidth, window.innerHeight );
512
513 }
514
515 //
516
517 function animate() {
518
519 requestAnimationFrame( animate );
520
521 var time = Date.now();
522
523 //windStrength = Math.cos( time / 7000 ) * 100 + 200;
524 windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
525 arrow.setLength( windStrength );
526 arrow.setDirection( windForce );
527
528 controls.update();
529 simulate(time);
530 render();
531 //stats.update();
532
533 }
534
535 function render() {
536
537
538 var timer = Date.now() * 0.0002;
539
540 var p = cloth.particles;
541 for ( var i = 0, il = p.length; i < il; i ++ ) {
542
543 clothGeometry.vertices[ i ].copy( p[ i ].position );
544
545 }
546
547 /*if(beehiveVisible == false){
548 for( var i = 0; i < objects.length; i++){
549 objects[i].position.setY(-2000);
550 if(objects[i].name === "flag"){
551 objects[i].position.setY(1250);
552 }
553 }
554 }*/
555
556 clothGeometry.computeFaceNormals();
557 clothGeometry.computeVertexNormals();
558
559 clothGeometry.normalsNeedUpdate = true;
560 clothGeometry.verticesNeedUpdate = true;
561
562 if(raining && weatherSystem.type != rainSystem){
563 snowing = false;
564 sunny = false;
565 weatherSystem.swap(rainSystem);
566 }else if(snowing && weatherSystem.type != snowSystem){
567 raining = false;
568 sunny = false;
569 weatherSystem.swap(snowSystem);
570 }else if(sunny && weatherSystem.type != sunSystem){
571 raining = false;
572 snowing = false;
573 weatherSystem.swap(sunSystem);
574 }
575
576 if(weatherSystem.isSet() === true){
577 weatherSystem.update();
578 }
579
580 camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+1500, scene.position.z) );
581
582 renderer.render( scene, camera );
583
584 }
585
586 </script>
587 </body>
588</html>
Note: See TracBrowser for help on using the repository browser.