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

Revision 29694, 13.9 KB (checked in by bmt11, 5 years ago)

Wind Control is now fully implemented and functioning as expected :)

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