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

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

Final touches on CSS slider for weather effects. Need to still implement sunny weather change.
File size: 12.4 KB
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() {
358
359 if(initial){
360
361 // create materials
362 materials = [
363 new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTextures[0], side: THREE.DoubleSide } ),
364 ];
365
366 // cloth geometry
367
368 clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
369 clothGeometry.dynamic = true;
370 clothGeometry.computeFaceNormals();
371
372 uniforms = { texture: { type: "t", value: 0, texture: clothTextures[0] } };
373 vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
374 fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
375
376 // cloth mesh
377 object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
378 object.position.set( 0, 150, 0 );
379 object.castShadow = false;
380 object.receiveShadow = false;
381 object.material.transparent = true;
382 object.material.opacity = 0.85;
383 scene.add( object );
384 initial = false;
385 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
386
387 }else{
388 clothTextures[flagSelector] = THREE.ImageUtils.loadTexture( flags[flagSelector]+'?'+Date.now() );
389 object.material.map = clothTextures[flagSelector];
390 object.material.needsUpdate = true;
391 }
392
393 }
394
395
396 //
397
398 function onWindowResize() {
399
400 camera.aspect = window.innerWidth / window.innerHeight;
401 camera.updateProjectionMatrix();
402
403 renderer.setSize( window.innerWidth, window.innerHeight );
404
405 }
406
407 //
408
409 function animate() {
410
411 requestAnimationFrame( animate );
412
413 var time = Date.now();
414 windStrength = Math.cos( time / 7000 ) * 100 + 200;
415 windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
416 arrow.setLength( windStrength );
417 arrow.setDirection( windForce );
418 controls.update();
419 simulate(time);
420 render();
421 stats.update();
422
423 }
424
425 function render() {
426
427
428 var timer = Date.now() * 0.0002;
429
430 keyboard.update();
431 if( keyboard.down("A")) {
432 flagSelector--;
433 if(flagSelector < 0) flagSelector = flags.length-1;
434 createFlag();
435
436 }else if(keyboard.down("D")) {
437 flagSelector++;
438 if(flagSelector >= flags.length) flagSelector = 0;
439 createFlag();
440 }
441
442 var p = cloth.particles;
443 for ( var i = 0, il = p.length; i < il; i ++ ) {
444
445 clothGeometry.vertices[ i ].copy( p[ i ].position );
446
447 }
448
449 clothGeometry.computeFaceNormals();
450 clothGeometry.computeVertexNormals();
451
452 clothGeometry.normalsNeedUpdate = true;
453 clothGeometry.verticesNeedUpdate = true;
454
455
456
457 if(raining && weatherSystem.type != rainSystem){
458 snowing = false;
459 weatherSystem.swap(rainSystem);
460 }else if(snowing && weatherSystem.type != snowSystem){
461 raining = false;
462 weatherSystem.swap(snowSystem);
463 }
464
465 if(weatherSystem.isSet() === true){
466 weatherSystem.update();
467 }
468
469 camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+150, scene.position.z) );
470
471 renderer.render( scene, camera );
472
473 }
474
475 </script><div><canvas width="1366" height="600"></canvas>
476</body></html>
Note: See TracBrowser for help on using the repository browser.