root/other-projects/nz-flag-design/trunk/render-3d/flag.html @ 29696

Revision 29696, 14.8 KB (checked in by bmt11, 5 years ago)
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       
134        <script type="text/javascript" src="./Flag_files/KeyboardState.js"></script>
135
136        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
137       
138        <script type="x-shader/x-fragment" id="fragmentShaderDepth">
139       
140            uniform sampler2D texture;
141            varying vec2 vUV;
142
143            vec4 pack_depth( const in float depth ) {
144
145                const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
146                const vec4 bit_mask  = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
147                vec4 res = fract( depth * bit_shift );
148                res -= res.xxyz * bit_mask;
149                return res;
150
151            }
152
153            void main() {
154
155                vec4 pixel = texture2D( texture, vUV );
156
157                if ( pixel.a < 0.5 ) discard;
158
159                gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
160
161            }
162        </script>
163
164        <script type="x-shader/x-vertex" id="vertexShaderDepth">
165
166            varying vec2 vUV;
167
168            void main() {
169
170                vUV = 0.75 * uv;
171
172                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
173
174                gl_Position = projectionMatrix * mvPosition;
175
176            }
177
178        </script>
179
180        <script type="text/javascript">
181            var keyboard = new KeyboardState();
182            var clothTextures = [];
183
184            var initial = true;
185           
186            var pins = [];
187            for (var j=0;j<=cloth.h;j++){
188                pins.push(cloth.index(0, j));
189            }
190            /*  Light variables   */
191            var light;
192
193            /*  Weather variables  */
194            var weatherSystem;
195           
196            var raining = false;
197            var snowing = false;
198            var sunny = false;
199            var visible = true;
200           
201            var snowSystem;
202            var rainSystem;
203            var sunSystem;
204           
205            /*  Mouse variables     */
206            var mouseX;
207            var mouseY;
208            var clickPos = '';
209            var mouseDown = false;
210           
211            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
212
213            var container, stats;
214            var camera, scene, renderer;
215           
216            var cameraRot = 90;
217            var cameraElevation = 0;
218            var controls;
219
220            var clothGeometry;
221           
222            var object, tmpFlag, arrow;
223           
224
225            var rotate = false;
226           
227            // array for holding existing flags
228           
229            var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
230            var flagSelector = 0;
231            var materials;
232            var vertexShader;
233            var fragmentShader;
234            var uniforms;
235
236            init();
237            animate();
238
239            function init() {
240           
241                container = document.createElement( 'div' );
242                document.body.appendChild( container );
243               
244                windStrength = 100;
245               
246                // scene
247
248                scene = new THREE.Scene();
249
250                scene.fog = new THREE.Fog( 0x404040, 1000, 14000 );
251                scene.fog.color.setHSL( 0.1, 0.1, 0.8 );
252
253                // camera
254
255                camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
256                camera.position.y = 1500;
257                camera.position.z = 2500;
258                camera.position.x = 2500;
259                scene.add( camera );
260                controls = new THREE.OrbitControls( camera );
261                controls.addEventListener( 'change', render );
262               
263                // lights
264               
265                scene.add( new THREE.AmbientLight( 0x404040 ) );
266
267                light = new THREE.DirectionalLight( 0xffffff, 1 );
268                light.color.setHSL( 0.6, 0.125, 1 );
269                light.position.set( 50, 200, 100 );
270                light.position.multiplyScalar( 1.3 );
271
272                light.castShadow = true;
273                light.shadowCameraVisible = false;
274
275                light.shadowMapWidth = 2048;
276                light.shadowMapHeight = 2048;
277
278                var d = 200;
279
280                light.shadowCameraLeft = -d;
281                light.shadowCameraRight = d;
282                light.shadowCameraTop = d;
283                light.shadowCameraBottom = -d;
284
285                light.shadowCameraFar = 1000;
286                light.shadowDarkness = 0.5;
287
288                scene.add( light );
289               
290                /*light = new THREE.DirectionalLight( 0xffffff, 1.25 );
291                light.color.setHSL( 0.3, 0.95, 1 );
292                light.position.set( 0, -1, 0 );*/
293
294                //scene.add( light );
295               
296                /* Weather init */
297               
298                rainSystem = new rain();
299                snowSystem = new snow();
300                sunSystem = new sun();
301                weatherSystem = new weatherSystem(scene);
302           
303                /* ------------------ */
304               
305                var session_id = $.cookie('JSESSIONID');
306                if (session_id) {
307                  flags[0] = "images/flag-" + session_id + ".png";
308                }
309
310                // load flag textures
311                var i;
312               
313                for(i = 0; i < flags.length; i++){
314                    clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
315                    //clothTextures[i].needsUpdate = true;
316                    clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
317                    clothTextures[i].anisotropy = 16;
318                }
319                createFlag();
320               
321                // weather
322
323                // arrow
324
325                arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
326                arrow.position.set( -200, -50, -200 );
327                arrow.setLength( 0 );
328                arrow.setDirection( 0 );
329                //scene.add( arrow );
330
331   
332
333                // ground
334
335                var initColor = new THREE.Color( 0x00ff00 );
336                initColor.setHSL( 0.3, 0.85, 0.8 );
337                var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
338
339                var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
340
341                var groundTexture = THREE.ImageUtils.loadTexture( "./images/grass.jpg", undefined, function() { groundMaterial.map = groundTexture } );
342                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
343                groundTexture.repeat.set( 32, 32 );
344                groundTexture.anisotropy = 16;
345
346                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
347                mesh.position.y = -250;
348                mesh.rotation.x = - Math.PI / 2;
349                mesh.receiveShadow = true;
350                scene.add( mesh );
351
352                // poles
353
354                var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
355                var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
356
357                var mesh = new THREE.Mesh( poleGeo, poleMat );
358                mesh.position.y = 1650; //-250
359                mesh.position.x = -305;
360                mesh.position.z = -165;
361                mesh.receiveShadow = true;
362                mesh.castShadow = false;
363                scene.add( mesh );
364
365                //
366                renderer = new THREE.WebGLRenderer( { antialias: true } );
367                renderer.setSize( window.innerWidth, window.innerHeight );
368                renderer.setClearColor( scene.fog.color );
369
370                container.appendChild( renderer.domElement );
371
372                renderer.gammaInput = true;
373                renderer.gammaOutput = true;
374                renderer.physicallyBasedShading = true;
375
376                renderer.shadowMapEnabled = true;
377
378                //
379
380                /*stats = new Stats();
381                stats.domElement.style.position = 'absolute';
382                stats.domElement.style.top = '0px';
383                container.appendChild( stats.domElement );
384
385                stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
386                stats.domElement.children[ 0 ].style.background = "transparent";
387                stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";*/
388
389                //
390
391                window.addEventListener( 'resize', onWindowResize, false );
392               
393               
394                var loader = new THREE.ColladaLoader();
395                loader.load('./images/Beehive2.dae', function (result) {
396                  var beehive = result.scene;
397                 // var tex       = beehive[ 0 ];
398                 
399                 //beehive.material.needsUpdate = true;
400                 // beehive.material.transparent = true;
401                  //beehive.material.opacity = 0.5;
402                  //console.log(beehive);
403                  /*for( var i = 0; i < beehive.children[0].children.length; i++){
404                    //beehive.children[0].children[i].material.side = THREE.DoubleSide;
405                  }*/
406               
407                 
408                  beehive.position.set(-300,-250,-300);
409                  beehive.scale.set(1,1,1);
410                  beehive.rotation.set(1.5*Math.PI,0,0);
411                  scene.add(beehive);
412                });
413            }
414           
415            //
416            var flag_toggle = 0;
417           
418            function createFlag(flagFilename) {
419                    if (flagFilename) {
420                    flags[0] = "./images/" + flagFilename;
421                }
422   
423                if(initial){
424               
425                    // create materials
426                    materials = [
427                        new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
428                    ];
429                   
430                    // cloth geometry
431
432                    clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
433                    clothGeometry.dynamic = true;
434                    clothGeometry.computeFaceNormals();
435
436                    uniforms = { texture:  { type: "t", value: 0, texture: clothTextures[0] } };
437                    vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
438                    fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent; 
439
440                    // cloth mesh
441                    object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
442                    object.position.set( 0, 150, 0 );
443                    object.castShadow = false;
444                    object.receiveShadow = false;
445                    object.material.transparent = true;
446                    object.material.opacity = 0.85;
447                    object.position.y = 1800;
448                    object.position.x = -305;
449                    object.position.z = -165;
450                    scene.add( object );
451                   
452                    initial = false;
453                    object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
454               
455                }else{
456                    clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
457                    object.material.map = clothTextures[flagSelector];
458                    object.material.needsUpdate = true;
459                }
460               
461            }
462           
463
464            //
465
466            function onWindowResize() {
467
468                camera.aspect = window.innerWidth / window.innerHeight;
469                camera.updateProjectionMatrix();
470
471                renderer.setSize( window.innerWidth, window.innerHeight );
472
473            }
474
475            //
476
477            function animate() {
478
479                requestAnimationFrame( animate );
480
481                var time = Date.now();
482
483                //windStrength = Math.cos( time / 7000 ) * 100 + 200;
484                windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
485                arrow.setLength( windStrength );
486                arrow.setDirection( windForce );
487
488                controls.update();
489                simulate(time);
490                render();
491                //stats.update();
492
493            }
494           
495            function render() {
496               
497               
498                var timer = Date.now() * 0.0002;
499               
500                var p = cloth.particles;
501                for ( var i = 0, il = p.length; i < il; i ++ ) {
502
503                    clothGeometry.vertices[ i ].copy( p[ i ].position );
504
505                }
506               
507                clothGeometry.computeFaceNormals();
508                clothGeometry.computeVertexNormals();
509
510                clothGeometry.normalsNeedUpdate = true;
511                clothGeometry.verticesNeedUpdate = true;
512
513                if(raining && weatherSystem.type != rainSystem){
514                    snowing = false;
515                    sunny = false;
516                    weatherSystem.swap(rainSystem);
517                }else if(snowing && weatherSystem.type != snowSystem){
518                    raining = false;
519                    sunny = false;
520                    weatherSystem.swap(snowSystem);
521                }else if(sunny && weatherSystem.type != sunSystem){
522                    raining = false;
523                    snowing = false;
524                    weatherSystem.swap(sunSystem);
525                }
526               
527                if(weatherSystem.isSet() === true){
528                    weatherSystem.update();
529                }
530               
531                camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+1500, scene.position.z) );
532
533                renderer.render( scene, camera );
534
535            }
536       
537        </script>
538
539    </body>
540</html>
Note: See TracBrowser for help on using the browser.