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

Last change on this file since 29686 was 29686, checked in by bmt11, 9 years ago
File size: 14.1 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
[29547]6 <title>three.js webgl - 3D Flag hhh</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;
15 background-color: #000;
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>
63
64 <body>
[29575]65 <div id="menuContainer">
66 <div id="weatherMenu" style="color : white">
67 <!--Toggle:
68 <a onclick="wind = !wind;">Wind</a> |-->
[29634]69 <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
[29575]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>
[29475]75 </div>
[29575]76
77
78 <script type="text/javascript">
79 var open = false;
80 function openclose(){
81 if (open){
[29634]82 document.getElementById("menuContainer").style.right = "-19vw";
[29575]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
[29616]92 <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
93 <script type="text/javascript" src="../js/jquery.cookie.js"></script>
[29475]94
[29535]95 <script type="text/javascript" src="./Flag_files/Three.js"></script>
[29475]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>
[29634]103 <script type="text/javascript" src="./weather/sun.js"></script>
[29686]104 <script type="text/javascript" src="./Flag_files/ColladaLoader.js"></script>
[29475]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 = [];
[29547]153
[29475]154 var initial = true;
155
156 var pins = [];
[29547]157 for (var j=0;j<=cloth.h;j++){
158 pins.push(cloth.index(0, j));
159 }
[29475]160 /* Light variables */
161 var light;
162
163 /* Weather variables */
164 var weatherSystem;
[29634]165
[29475]166 var raining = false;
167 var snowing = false;
[29634]168 var sunny = false;
169
[29475]170 var snowSystem;
171 var rainSystem;
[29634]172 var sunSystem;
[29475]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;
[29547]190
[29475]191 var object, tmpFlag, arrow;
[29634]192
[29475]193
194 var rotate = false;
195
196 // array for holding existing flags
197
[29547]198 var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"];
[29475]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 );
[29686]212
[29475]213
214 // scene
215
216 scene = new THREE.Scene();
217
[29686]218 scene.fog = new THREE.Fog( 0x404040, 1000, 14000 );
[29475]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 );
[29686]224 camera.position.y = 1500;
225 camera.position.z = 2500;
226 camera.position.x = 2500;
[29475]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;
[29547]241 light.shadowCameraVisible = false;
[29475]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();
[29634]268 sunSystem = new sun();
[29475]269 weatherSystem = new weatherSystem(scene);
270
271 /* ------------------ */
272
[29616]273 var session_id = $.cookie('JSESSIONID');
274 if (session_id) {
[29620]275 flags[0] = "images/flag-" + session_id + ".png";
[29616]276 }
277
[29475]278 // load flag textures
279 var i;
280
281 for(i = 0; i < flags.length; i++){
282 clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
[29547]283 //clothTextures[i].needsUpdate = true;
[29575]284 clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
[29475]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 );
[29634]295 arrow.setLength( 0 );
296 arrow.setDirection( 0 );
[29575]297 //scene.add( arrow );
[29475]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 );
[29686]326 mesh.position.y = 1650; //-250
327 mesh.position.x = -305;
328 mesh.position.z = -165;
[29475]329 mesh.receiveShadow = true;
[29547]330 mesh.castShadow = false;
[29475]331 scene.add( mesh );
332
[29686]333 /*var tmp = mesh.position
334 var gg = new THREE.BoxGeometry( 100, 100, 100 );
[29475]335 var mesh = new THREE.Mesh( gg, poleMat );
[29686]336 mesh.position.y = tmp.y - 740;
337 mesh.position.x = tmp.x; //125
338 mesh.position.z = tmp.z;
[29475]339 mesh.receiveShadow = true;
[29547]340 mesh.castShadow = false;
[29686]341 scene.add( mesh );*/
[29475]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 );
[29686]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 });
[29475]392 }
393
394 //
[29547]395 var flag_toggle = 0;
[29475]396
[29608]397 function createFlag(flagFilename) {
398 if (flagFilename) {
399 flags[0] = "./images/" + flagFilename;
400 }
[29475]401
[29547]402 if(initial){
[29475]403
[29547]404 // create materials
405 materials = [
406 new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
407 ];
[29475]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 );
[29547]422 object.castShadow = false;
423 object.receiveShadow = false;
424 object.material.transparent = true;
425 object.material.opacity = 0.85;
[29686]426 object.position.y = 1800;
427 object.position.x = -305;
428 object.position.z = -165;
[29475]429 scene.add( object );
430 initial = false;
431 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
432
433 }else{
[29547]434 clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
435 object.material.map = clothTextures[flagSelector];
436 object.material.needsUpdate = true;
[29475]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();
[29634]460
[29475]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 );
[29634]465
[29475]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;
[29547]502
[29475]503
504
505 if(raining && weatherSystem.type != rainSystem){
506 snowing = false;
[29634]507 sunny = false;
[29475]508 weatherSystem.swap(rainSystem);
509 }else if(snowing && weatherSystem.type != snowSystem){
510 raining = false;
[29634]511 sunny = false;
[29475]512 weatherSystem.swap(snowSystem);
[29634]513 }else if(sunny && weatherSystem.type != sunSystem){
514 raining = false;
515 snowing = false;
516 weatherSystem.swap(sunSystem);
[29475]517 }
518
519 if(weatherSystem.isSet() === true){
520 weatherSystem.update();
521 }
522
[29686]523 camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+1500, scene.position.z) );
[29475]524
525 renderer.render( scene, camera );
526
527 }
528
[29547]529 </script><div><canvas width="1366" height="600"></canvas>
[29475]530</body></html>
Note: See TracBrowser for help on using the repository browser.