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

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