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

Revision 29608, 12.5 KB (checked in by davidb, 5 years ago)

Switch to using JESSIONID as part of the flagname, so everyone visiting the site gets to design their flag in private.

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