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

Last change on this file since 29599 was 29579, checked in by bmt11, 10 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.