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

Last change on this file since 29694 was 29694, checked in by bmt11, 9 years ago

Wind Control is now fully implemented and functioning as expected :)
File size: 13.9 KB
RevLine 
[29475]1<!DOCTYPE html>
[29616]2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
[29475]5
[29693]6 <title>3D Representation of Flag</title>
[29475]7 <meta charset="utf-8">
8 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
[29547]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'>
[29475]12 <style>
13 body {
14 font-family: Monospace;
[29694]15 background-color: transparent;
[29475]16 color: #000;
17 margin: 0px;
18 overflow: hidden;
19 position: fixed;
20 }
[29575]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");
[29634]29 background-size: cover;
[29575]30 background-position: center;
31 }
[29475]32
[29575]33 #weatherMenu {
[29475]34 text-align: center;
[29575]35 padding: 0px;
36 width: 20vw;
[29475]37 z-index: 10;
[29575]38 height: 100vh;
39 position: relative;
40 float: right;
[29475]41 }
[29575]42
43 #arrow{
44 float: left;
45 background-image: url("./images/arrow.png");
46 background-position: center;
[29579]47 background-size: cover;
48 background-repeat: no-repeat;
[29575]49 margin: auto;
50 right: 1vw;
51 width: 5vw;
[29579]52 height: 5vw;
[29575]53 position: relative;
54 border-radius: 100%;
55 top: 45vh;
56 z-index: 9;
57 transition: transform 0.5s;
58 transform: rotate(360deg);
[29475]59 }
60
61 </style>
62 <style type="text/css"></style></head>
[29693]63
[29475]64 <body>
[29693]65
[29575]66 <div id="menuContainer">
67 <div id="weatherMenu" style="color : white">
68 <!--Toggle:
69 <a onclick="wind = !wind;">Wind</a> |-->
[29634]70 <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
[29575]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>
[29475]76 </div>
[29575]77
[29693]78 <div id="slider">
79 <div id="speed"></div>
80 </div>
[29575]81
[29693]82 <link rel="stylesheet" href="./CSS/slider.css" />
83
[29575]84 <script type="text/javascript">
[29693]85
86 /* JQUERY SLIDER */
87
88
89
90
91 /*----------------------------------------------*/
92
[29575]93 var open = false;
94 function openclose(){
95 if (open){
[29634]96 document.getElementById("menuContainer").style.right = "-19vw";
[29575]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
[29616]106 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
107 <script type="text/javascript" src="../js/jquery.cookie.js"></script>
[29475]108
[29535]109 <script type="text/javascript" src="./Flag_files/Three.js"></script>
[29475]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>
[29634]117 <script type="text/javascript" src="./weather/sun.js"></script>
[29686]118 <script type="text/javascript" src="./Flag_files/ColladaLoader.js"></script>
[29693]119 <script type="text/javascript" src="./Flag_files/slider.js"></script>
[29475]120
121 <script type="text/javascript" src="./Flag_files/KeyboardState.js"></script>
122
[29693]123 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
124
[29475]125 <script type="x-shader/x-fragment" id="fragmentShaderDepth">
[29694]126
[29475]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 = [];
[29547]170
[29475]171 var initial = true;
172
173 var pins = [];
[29547]174 for (var j=0;j<=cloth.h;j++){
175 pins.push(cloth.index(0, j));
176 }
[29475]177 /* Light variables */
178 var light;
179
180 /* Weather variables */
181 var weatherSystem;
[29634]182
[29475]183 var raining = false;
184 var snowing = false;
[29634]185 var sunny = false;
186
[29475]187 var snowSystem;
188 var rainSystem;
[29634]189 var sunSystem;
[29475]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;
[29547]207
[29475]208 var object, tmpFlag, arrow;
[29634]209
[29475]210
211 var rotate = false;
212
213 // array for holding existing flags
214
[29547]215 var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
[29475]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
[29694]230 windStrength = 100;
231
[29475]232 // scene
233
234 scene = new THREE.Scene();
235
[29686]236 scene.fog = new THREE.Fog( 0x404040, 1000, 14000 );
[29475]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 );
[29686]242 camera.position.y = 1500;
243 camera.position.z = 2500;
244 camera.position.x = 2500;
[29475]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;
[29547]259 light.shadowCameraVisible = false;
[29475]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();
[29634]286 sunSystem = new sun();
[29475]287 weatherSystem = new weatherSystem(scene);
288
289 /* ------------------ */
290
[29616]291 var session_id = $.cookie('JSESSIONID');
292 if (session_id) {
[29620]293 flags[0] = "images/flag-" + session_id + ".png";
[29616]294 }
295
[29475]296 // load flag textures
297 var i;
298
299 for(i = 0; i < flags.length; i++){
300 clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
[29547]301 //clothTextures[i].needsUpdate = true;
[29575]302 clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
[29475]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 );
[29634]313 arrow.setLength( 0 );
314 arrow.setDirection( 0 );
[29575]315 //scene.add( arrow );
[29475]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 );
[29686]344 mesh.position.y = 1650; //-250
345 mesh.position.x = -305;
346 mesh.position.z = -165;
[29475]347 mesh.receiveShadow = true;
[29547]348 mesh.castShadow = false;
[29475]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
[29694]366 /*stats = new Stats();
[29475]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";
[29694]373 stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";*/
[29475]374
375 //
376
377 window.addEventListener( 'resize', onWindowResize, false );
[29686]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 });
[29475]399 }
400
401 //
[29547]402 var flag_toggle = 0;
[29475]403
[29608]404 function createFlag(flagFilename) {
405 if (flagFilename) {
406 flags[0] = "./images/" + flagFilename;
407 }
[29475]408
[29547]409 if(initial){
[29475]410
[29547]411 // create materials
412 materials = [
413 new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
414 ];
[29475]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 );
[29547]429 object.castShadow = false;
430 object.receiveShadow = false;
431 object.material.transparent = true;
432 object.material.opacity = 0.85;
[29686]433 object.position.y = 1800;
434 object.position.x = -305;
435 object.position.z = -165;
[29475]436 scene.add( object );
[29693]437
[29475]438 initial = false;
439 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
440
441 }else{
[29547]442 clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
443 object.material.map = clothTextures[flagSelector];
444 object.material.needsUpdate = true;
[29475]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();
[29694]468
469 //windStrength = Math.cos( time / 7000 ) * 100 + 200;
[29475]470 windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
471 arrow.setLength( windStrength );
472 arrow.setDirection( windForce );
[29634]473
[29475]474 controls.update();
475 simulate(time);
476 render();
[29694]477 //stats.update();
[29475]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;
[29634]501 sunny = false;
[29475]502 weatherSystem.swap(rainSystem);
503 }else if(snowing && weatherSystem.type != snowSystem){
504 raining = false;
[29634]505 sunny = false;
[29475]506 weatherSystem.swap(snowSystem);
[29634]507 }else if(sunny && weatherSystem.type != sunSystem){
508 raining = false;
509 snowing = false;
510 weatherSystem.swap(sunSystem);
[29475]511 }
512
513 if(weatherSystem.isSet() === true){
514 weatherSystem.update();
515 }
516
[29686]517 camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+1500, scene.position.z) );
[29475]518
519 renderer.render( scene, camera );
520
521 }
[29693]522
523 </script>
[29694]524
525 </body>
526</html>
Note: See TracBrowser for help on using the repository browser.