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

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

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