1 | <!DOCTYPE html>
|
---|
2 | <html lang="en">
|
---|
3 | <head>
|
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
---|
5 |
|
---|
6 | <title>3D Representation of Flag</title>
|
---|
7 | <meta charset="utf-8">
|
---|
8 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
---|
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'>
|
---|
12 | <style>
|
---|
13 | body {
|
---|
14 | font-family: Monospace;
|
---|
15 | background-color: transparent;
|
---|
16 | color: #000;
|
---|
17 | margin: 0px;
|
---|
18 | overflow: hidden;
|
---|
19 | position: fixed;
|
---|
20 | }
|
---|
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");
|
---|
29 | background-size: cover;
|
---|
30 | background-position: center;
|
---|
31 | }
|
---|
32 |
|
---|
33 | #weatherMenu {
|
---|
34 | text-align: center;
|
---|
35 | padding: 0px;
|
---|
36 | width: 20vw;
|
---|
37 | z-index: 10;
|
---|
38 | height: 100vh;
|
---|
39 | position: relative;
|
---|
40 | float: right;
|
---|
41 | }
|
---|
42 |
|
---|
43 | #arrow{
|
---|
44 | float: left;
|
---|
45 | background-image: url("./images/arrow.png");
|
---|
46 | background-position: center;
|
---|
47 | background-size: cover;
|
---|
48 | background-repeat: no-repeat;
|
---|
49 | margin: auto;
|
---|
50 | right: 1vw;
|
---|
51 | width: 5vw;
|
---|
52 | height: 5vw;
|
---|
53 | position: relative;
|
---|
54 | border-radius: 100%;
|
---|
55 | top: 45vh;
|
---|
56 | z-index: 9;
|
---|
57 | transition: transform 0.5s;
|
---|
58 | transform: rotate(360deg);
|
---|
59 | }
|
---|
60 |
|
---|
61 | </style>
|
---|
62 | </head>
|
---|
63 |
|
---|
64 | <body>
|
---|
65 |
|
---|
66 | <!----------------------------- Weather Menu ----------------------------------->
|
---|
67 | <!------------------------------------------------------------------------------>
|
---|
68 |
|
---|
69 | <div id="menuContainer">
|
---|
70 |
|
---|
71 | <div id="weatherMenu">
|
---|
72 | <a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="sunny = !sunny;"></a>
|
---|
73 | <a class="myButton" style="background-image:url('./images/rainButton.jpg')" onclick="raining = !raining;"></a>
|
---|
74 | <a class="myButton" style="background-image:url('./images/snowButton.jpg')" onclick="snowing = !snowing;"></a>
|
---|
75 | </div>
|
---|
76 |
|
---|
77 | <div id="arrow" onclick="openclose()"></div>
|
---|
78 |
|
---|
79 | </div>
|
---|
80 |
|
---|
81 | <!------------------------------------------------------------------------------>
|
---|
82 | <!------------------------------------------------------------------------------>
|
---|
83 |
|
---|
84 |
|
---|
85 |
|
---|
86 | <!-------------------------- Wind Speed Control -------------------------------->
|
---|
87 | <!------------------------------------------------------------------------------>
|
---|
88 |
|
---|
89 | <div id="slider">
|
---|
90 | <div id="speed"></div>
|
---|
91 | </div>
|
---|
92 |
|
---|
93 | <link rel="stylesheet" href="./CSS/slider.css" />
|
---|
94 |
|
---|
95 | <!------------------------------------------------------------------------------>
|
---|
96 | <!------------------------------------------------------------------------------>
|
---|
97 |
|
---|
98 |
|
---|
99 |
|
---|
100 | <!----------------- Opening of the weather menu -------------------------------->
|
---|
101 | <!----------------- slides out from right to left ------------------------------>
|
---|
102 | <script type="text/javascript">
|
---|
103 | var open = false;
|
---|
104 |
|
---|
105 | function openclose(){
|
---|
106 | if (open){
|
---|
107 | document.getElementById("menuContainer").style.right = "-19vw";
|
---|
108 | document.getElementById("arrow").style.transform = "rotate(360deg)";
|
---|
109 | }else{document.getElementById("menuContainer").style.right = "0vw";
|
---|
110 | document.getElementById("arrow").style.transform = "rotate(180deg)";
|
---|
111 | }
|
---|
112 | open = !open;
|
---|
113 | }
|
---|
114 | </script>
|
---|
115 | <!------------------------------------------------------------------------------>
|
---|
116 | <!------------------------------------------------------------------------------>
|
---|
117 |
|
---|
118 |
|
---|
119 | <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
|
---|
120 | <script type="text/javascript" src="../js/jquery.cookie.js"></script>
|
---|
121 |
|
---|
122 | <script type="text/javascript" src="./Flag_files/Three.js"></script>
|
---|
123 | <script type="text/javascript" src="./Flag_files/Detector.js"></script>
|
---|
124 | <script type="text/javascript" src="./Flag_files/Stats.js"></script>
|
---|
125 | <script type="text/javascript" src="./Flag_files/Flag.js"></script>
|
---|
126 | <script type="text/javascript" src="./Flag_files/OrbitControls.js"></script>
|
---|
127 | <script type="text/javascript" src="./weather/weather.js"></script>
|
---|
128 | <script type="text/javascript" src="./weather/rain.js"></script>
|
---|
129 | <script type="text/javascript" src="./weather/snow.js"></script>
|
---|
130 | <script type="text/javascript" src="./weather/sun.js"></script>
|
---|
131 | <script type="text/javascript" src="./Flag_files/ColladaLoader.js"></script>
|
---|
132 | <script type="text/javascript" src="./Flag_files/slider.js"></script>
|
---|
133 | <script type="text/javascript" src="./Flag_files/Projector.js"></script>
|
---|
134 |
|
---|
135 | <script type="text/javascript" src="./Flag_files/KeyboardState.js"></script>
|
---|
136 |
|
---|
137 | <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
|
---|
138 |
|
---|
139 | <script type="x-shader/x-fragment" id="fragmentShaderDepth">
|
---|
140 |
|
---|
141 | uniform sampler2D texture;
|
---|
142 | varying vec2 vUV;
|
---|
143 |
|
---|
144 | vec4 pack_depth( const in float depth ) {
|
---|
145 |
|
---|
146 | const vec4 bit_shift = vec4( 256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0 );
|
---|
147 | const vec4 bit_mask = vec4( 0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0 );
|
---|
148 | vec4 res = fract( depth * bit_shift );
|
---|
149 | res -= res.xxyz * bit_mask;
|
---|
150 | return res;
|
---|
151 |
|
---|
152 | }
|
---|
153 |
|
---|
154 | void main() {
|
---|
155 |
|
---|
156 | vec4 pixel = texture2D( texture, vUV );
|
---|
157 |
|
---|
158 | if ( pixel.a < 0.5 ) discard;
|
---|
159 |
|
---|
160 | gl_FragData[ 0 ] = pack_depth( gl_FragCoord.z );
|
---|
161 |
|
---|
162 | }
|
---|
163 | </script>
|
---|
164 |
|
---|
165 | <script type="x-shader/x-vertex" id="vertexShaderDepth">
|
---|
166 |
|
---|
167 | varying vec2 vUV;
|
---|
168 |
|
---|
169 | void main() {
|
---|
170 |
|
---|
171 | vUV = 0.75 * uv;
|
---|
172 |
|
---|
173 | vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
|
---|
174 |
|
---|
175 | gl_Position = projectionMatrix * mvPosition;
|
---|
176 |
|
---|
177 | }
|
---|
178 |
|
---|
179 | </script>
|
---|
180 |
|
---|
181 | <script type="text/javascript">
|
---|
182 |
|
---|
183 |
|
---|
184 |
|
---|
185 | function getURLParameter(name) {
|
---|
186 | return decodeURI(
|
---|
187 | (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
|
---|
188 | }
|
---|
189 |
|
---|
190 |
|
---|
191 | var keyboard = new KeyboardState();
|
---|
192 | var clothTexture;
|
---|
193 |
|
---|
194 | var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
|
---|
195 | var objects = [];
|
---|
196 | var beehiveVisible = true;
|
---|
197 |
|
---|
198 | var initial = true;
|
---|
199 |
|
---|
200 | var pins = [];
|
---|
201 | for (var j=0;j<=cloth.h;j++){
|
---|
202 | pins.push(cloth.index(0, j));
|
---|
203 | }
|
---|
204 | /* Light variables */
|
---|
205 | var light;
|
---|
206 |
|
---|
207 | /* Weather variables */
|
---|
208 | var weatherSystem;
|
---|
209 |
|
---|
210 | var raining = false;
|
---|
211 | var snowing = false;
|
---|
212 | var sunny = false;
|
---|
213 | var visible = true;
|
---|
214 |
|
---|
215 | var snowSystem;
|
---|
216 | var rainSystem;
|
---|
217 | var sunSystem;
|
---|
218 |
|
---|
219 | /* Mouse variables */
|
---|
220 | var mouseX;
|
---|
221 | var mouseY;
|
---|
222 | var clickPos = '';
|
---|
223 | var mouseDown = false;
|
---|
224 |
|
---|
225 | if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
---|
226 |
|
---|
227 | var container, stats;
|
---|
228 | var camera, scene, renderer;
|
---|
229 |
|
---|
230 | var cameraRot = 90;
|
---|
231 | var cameraElevation = 0;
|
---|
232 | var controls;
|
---|
233 |
|
---|
234 | var clothGeometry;
|
---|
235 |
|
---|
236 | var object, tmpFlag, arrow;
|
---|
237 |
|
---|
238 |
|
---|
239 | var rotate = false;
|
---|
240 |
|
---|
241 | // array for holding existing flags
|
---|
242 |
|
---|
243 | var flag = "./images/flag.png";//, "./images/flag2.png", "./images/canada.png"];
|
---|
244 | var flagSelector = 0;
|
---|
245 | var materials;
|
---|
246 | var vertexShader;
|
---|
247 | var fragmentShader;
|
---|
248 | var uniforms;
|
---|
249 |
|
---|
250 | init();
|
---|
251 | animate();
|
---|
252 |
|
---|
253 | function init() {
|
---|
254 |
|
---|
255 | container = document.createElement( 'div' );
|
---|
256 | document.body.appendChild( container );
|
---|
257 |
|
---|
258 | windStrength = 250;
|
---|
259 |
|
---|
260 | // scene
|
---|
261 |
|
---|
262 | scene = new THREE.Scene();
|
---|
263 |
|
---|
264 | scene.fog = new THREE.Fog( 0x404040, 1000, 14000 );
|
---|
265 | scene.fog.color.setHSL( 0.1, 0.1, 0.8 );
|
---|
266 |
|
---|
267 | // camera
|
---|
268 |
|
---|
269 | camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
|
---|
270 | camera.position.y = 1500;
|
---|
271 | camera.position.z = 2500;
|
---|
272 | camera.position.x = 2500;
|
---|
273 | scene.add( camera );
|
---|
274 | controls = new THREE.OrbitControls( camera );
|
---|
275 | controls.addEventListener( 'change', render );
|
---|
276 |
|
---|
277 | // lights
|
---|
278 |
|
---|
279 | scene.add( new THREE.AmbientLight( 0x404040 ) );
|
---|
280 |
|
---|
281 | light = new THREE.DirectionalLight( 0xffffff, 1 );
|
---|
282 | light.color.setHSL( 0.6, 0.125, 1 );
|
---|
283 | light.position.set( 50, 200, 100 );
|
---|
284 | light.position.multiplyScalar( 1.3 );
|
---|
285 |
|
---|
286 | light.castShadow = true;
|
---|
287 | light.shadowCameraVisible = false;
|
---|
288 |
|
---|
289 | light.shadowMapWidth = 2048;
|
---|
290 | light.shadowMapHeight = 2048;
|
---|
291 |
|
---|
292 | var d = 200;
|
---|
293 |
|
---|
294 | light.shadowCameraLeft = -d;
|
---|
295 | light.shadowCameraRight = d;
|
---|
296 | light.shadowCameraTop = d;
|
---|
297 | light.shadowCameraBottom = -d;
|
---|
298 |
|
---|
299 | light.shadowCameraFar = 1000;
|
---|
300 | light.shadowDarkness = 0.5;
|
---|
301 |
|
---|
302 | scene.add( light );
|
---|
303 |
|
---|
304 | /*light = new THREE.DirectionalLight( 0xffffff, 1.25 );
|
---|
305 | light.color.setHSL( 0.3, 0.95, 1 );
|
---|
306 | light.position.set( 0, -1, 0 );*/
|
---|
307 |
|
---|
308 | //scene.add( light );
|
---|
309 |
|
---|
310 | /* Weather init */
|
---|
311 |
|
---|
312 | rainSystem = new rain();
|
---|
313 | snowSystem = new snow();
|
---|
314 | sunSystem = new sun();
|
---|
315 | weatherSystem = new weatherSystem(scene);
|
---|
316 |
|
---|
317 | /* ------------------ */
|
---|
318 |
|
---|
319 | var flag_id = getURLParameter("flagID");
|
---|
320 | if (flag_id) {
|
---|
321 | flag = "../published/" + flag_id + "/myflag.png";
|
---|
322 | }
|
---|
323 | else {
|
---|
324 | var session_id = $.cookie('JSESSIONID');
|
---|
325 |
|
---|
326 | if (session_id) {
|
---|
327 | flag = "images/flag-" + session_id + ".png";
|
---|
328 | }
|
---|
329 | }
|
---|
330 |
|
---|
331 | // load flag textures
|
---|
332 |
|
---|
333 | clothTexture = THREE.ImageUtils.loadTexture( flag );
|
---|
334 | clothTexture.wrapS = clothTexture.wrapT = THREE.ClampToEdgeWrapping;
|
---|
335 | clothTexture.anisotropy = 16;
|
---|
336 | createFlag();
|
---|
337 |
|
---|
338 | // weather
|
---|
339 |
|
---|
340 | // arrow
|
---|
341 |
|
---|
342 | arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
|
---|
343 | arrow.position.set( -200, -50, -200 );
|
---|
344 | arrow.setLength( 0 );
|
---|
345 | arrow.setDirection( 0 );
|
---|
346 | //scene.add( arrow );
|
---|
347 |
|
---|
348 |
|
---|
349 |
|
---|
350 | // ground
|
---|
351 |
|
---|
352 | var initColor = new THREE.Color( 0x00ff00 );
|
---|
353 | initColor.setHSL( 0.3, 0.85, 0.8 );
|
---|
354 | var initTexture = THREE.ImageUtils.generateDataTexture( 1, 1, initColor );
|
---|
355 |
|
---|
356 | var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, map: initTexture, perPixel: true } );
|
---|
357 |
|
---|
358 | var groundTexture = THREE.ImageUtils.loadTexture( "./images/grass.jpg", undefined, function() { groundMaterial.map = groundTexture } );
|
---|
359 | groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
|
---|
360 | groundTexture.repeat.set( 32, 32 );
|
---|
361 | groundTexture.anisotropy = 16;
|
---|
362 |
|
---|
363 | var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
|
---|
364 | mesh.position.y = -250;
|
---|
365 | mesh.rotation.x = - Math.PI / 2;
|
---|
366 | mesh.receiveShadow = true;
|
---|
367 | scene.add( mesh );
|
---|
368 |
|
---|
369 | // poles
|
---|
370 |
|
---|
371 | var poleGeo = new THREE.BoxGeometry( 5, 750, 5 );
|
---|
372 | var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100, perPixel: true } );
|
---|
373 |
|
---|
374 | var mesh = new THREE.Mesh( poleGeo, poleMat );
|
---|
375 | mesh.position.y = 1650; //-250
|
---|
376 | mesh.position.x = -305;
|
---|
377 | mesh.position.z = -165;
|
---|
378 | mesh.receiveShadow = true;
|
---|
379 | mesh.castShadow = false;
|
---|
380 | scene.add( mesh );
|
---|
381 | //objects.push( mesh );
|
---|
382 |
|
---|
383 | //
|
---|
384 | renderer = new THREE.WebGLRenderer( { antialias: true } );
|
---|
385 | renderer.setSize( window.innerWidth, window.innerHeight );
|
---|
386 | renderer.setClearColor( scene.fog.color );
|
---|
387 |
|
---|
388 | container.appendChild( renderer.domElement );
|
---|
389 |
|
---|
390 | renderer.gammaInput = true;
|
---|
391 | renderer.gammaOutput = true;
|
---|
392 | renderer.physicallyBasedShading = true;
|
---|
393 |
|
---|
394 | renderer.shadowMapEnabled = true;
|
---|
395 |
|
---|
396 | //
|
---|
397 |
|
---|
398 | /*stats = new Stats();
|
---|
399 | stats.domElement.style.position = 'absolute';
|
---|
400 | stats.domElement.style.top = '0px';
|
---|
401 | container.appendChild( stats.domElement );
|
---|
402 |
|
---|
403 | stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
|
---|
404 | stats.domElement.children[ 0 ].style.background = "transparent";
|
---|
405 | stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";*/
|
---|
406 |
|
---|
407 | //
|
---|
408 |
|
---|
409 | window.addEventListener( 'resize', onWindowResize, false );
|
---|
410 |
|
---|
411 |
|
---|
412 | var loader = new THREE.ColladaLoader();
|
---|
413 | loader.load('./images/Beehive2.dae', function (result) {
|
---|
414 | var beehive = result.scene;
|
---|
415 | // var tex = beehive[ 0 ];
|
---|
416 |
|
---|
417 | //beehive.material.needsUpdate = true;
|
---|
418 | // beehive.material.transparent = true;
|
---|
419 | //beehive.material.opacity = 0.5;
|
---|
420 | //console.log(beehive);
|
---|
421 | /*for( var i = 0; i < beehive.children[0].children.length; i++){
|
---|
422 | //beehive.children[0].children[i].material.side = THREE.DoubleSide;
|
---|
423 | }*/
|
---|
424 |
|
---|
425 |
|
---|
426 | beehive.position.set(-300,-250,-300);
|
---|
427 | beehive.scale.set(1,1,1);
|
---|
428 | beehive.rotation.set(1.5*Math.PI,0,0);
|
---|
429 | beehive.name = "beehive";
|
---|
430 | scene.add(beehive);
|
---|
431 | objects.push( beehive );
|
---|
432 | });
|
---|
433 | projector = new THREE.Projector();
|
---|
434 | document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
---|
435 | }
|
---|
436 |
|
---|
437 | //
|
---|
438 | var flag_toggle = 0;
|
---|
439 |
|
---|
440 | function createFlag(flagFilename) {
|
---|
441 | if (flagFilename) {
|
---|
442 | flag = "./images/" + flagFilename;
|
---|
443 | }
|
---|
444 |
|
---|
445 | if(initial){
|
---|
446 |
|
---|
447 | // create materials
|
---|
448 | materials = [
|
---|
449 | new THREE.MeshLambertMaterial( {specular: 0x030303, fog: false, emissive: 0x111111, shininess: 10, map: clothTexture, side: THREE.DoubleSide } ),
|
---|
450 | ];
|
---|
451 |
|
---|
452 | // cloth geometry
|
---|
453 |
|
---|
454 | clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h, true );
|
---|
455 | clothGeometry.dynamic = true;
|
---|
456 | clothGeometry.computeFaceNormals();
|
---|
457 |
|
---|
458 | uniforms = { texture: { type: "t", value: 0, texture: clothTexture } };
|
---|
459 | vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
|
---|
460 | fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
|
---|
461 |
|
---|
462 | // cloth mesh
|
---|
463 | object = new THREE.Mesh( clothGeometry, materials[ 0 ] );
|
---|
464 | object.position.set( 0, 150, 0 );
|
---|
465 | object.castShadow = false;
|
---|
466 | object.receiveShadow = false;
|
---|
467 | object.material.transparent = true;
|
---|
468 | object.material.opacity = 0.85;
|
---|
469 | object.position.y = 1800;
|
---|
470 | object.position.x = -305;
|
---|
471 | object.position.z = -165;
|
---|
472 | object.name = "flag";
|
---|
473 | scene.add( object );
|
---|
474 | objects.push( object );
|
---|
475 |
|
---|
476 | initial = false;
|
---|
477 | object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );
|
---|
478 |
|
---|
479 | }else{
|
---|
480 | clothTexture = THREE.ImageUtils.loadTexture( flag+'?'+Date.now() );
|
---|
481 | object.material.map = clothTexture;
|
---|
482 | object.material.needsUpdate = true;
|
---|
483 | }
|
---|
484 |
|
---|
485 | }
|
---|
486 |
|
---|
487 | function onDocumentMouseDown( event ) {
|
---|
488 |
|
---|
489 | var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, //x
|
---|
490 | -( event.clientY / window.innerHeight ) * 2 + 1, //y
|
---|
491 | 1 ); //z
|
---|
492 | mouse3D.unproject( camera );
|
---|
493 | mouse3D.sub( camera.position );
|
---|
494 | mouse3D.normalize();
|
---|
495 | var raycaster = new THREE.Raycaster( camera.position, mouse3D );
|
---|
496 | var intersects = raycaster.intersectObjects( objects , true);
|
---|
497 | if(intersects.length > 0){
|
---|
498 | beehiveVisible = false;
|
---|
499 | //intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
|
---|
500 | }
|
---|
501 | }
|
---|
502 |
|
---|
503 |
|
---|
504 | //
|
---|
505 |
|
---|
506 | function onWindowResize() {
|
---|
507 |
|
---|
508 | camera.aspect = window.innerWidth / window.innerHeight;
|
---|
509 | camera.updateProjectionMatrix();
|
---|
510 |
|
---|
511 | renderer.setSize( window.innerWidth, window.innerHeight );
|
---|
512 |
|
---|
513 | }
|
---|
514 |
|
---|
515 | //
|
---|
516 |
|
---|
517 | function animate() {
|
---|
518 |
|
---|
519 | requestAnimationFrame( animate );
|
---|
520 |
|
---|
521 | var time = Date.now();
|
---|
522 |
|
---|
523 | //windStrength = Math.cos( time / 7000 ) * 100 + 200;
|
---|
524 | windForce.set( 1000,500,Math.sin( time / 1000 ) ).normalize().multiplyScalar( windStrength );
|
---|
525 | arrow.setLength( windStrength );
|
---|
526 | arrow.setDirection( windForce );
|
---|
527 |
|
---|
528 | controls.update();
|
---|
529 | simulate(time);
|
---|
530 | render();
|
---|
531 | //stats.update();
|
---|
532 |
|
---|
533 | }
|
---|
534 |
|
---|
535 | function render() {
|
---|
536 |
|
---|
537 |
|
---|
538 | var timer = Date.now() * 0.0002;
|
---|
539 |
|
---|
540 | var p = cloth.particles;
|
---|
541 | for ( var i = 0, il = p.length; i < il; i ++ ) {
|
---|
542 |
|
---|
543 | clothGeometry.vertices[ i ].copy( p[ i ].position );
|
---|
544 |
|
---|
545 | }
|
---|
546 |
|
---|
547 | /*if(beehiveVisible == false){
|
---|
548 | for( var i = 0; i < objects.length; i++){
|
---|
549 | objects[i].position.setY(-2000);
|
---|
550 | if(objects[i].name === "flag"){
|
---|
551 | objects[i].position.setY(1250);
|
---|
552 | }
|
---|
553 | }
|
---|
554 | }*/
|
---|
555 |
|
---|
556 | clothGeometry.computeFaceNormals();
|
---|
557 | clothGeometry.computeVertexNormals();
|
---|
558 |
|
---|
559 | clothGeometry.normalsNeedUpdate = true;
|
---|
560 | clothGeometry.verticesNeedUpdate = true;
|
---|
561 |
|
---|
562 | if(raining && weatherSystem.type != rainSystem){
|
---|
563 | snowing = false;
|
---|
564 | sunny = false;
|
---|
565 | weatherSystem.swap(rainSystem);
|
---|
566 | }else if(snowing && weatherSystem.type != snowSystem){
|
---|
567 | raining = false;
|
---|
568 | sunny = false;
|
---|
569 | weatherSystem.swap(snowSystem);
|
---|
570 | }else if(sunny && weatherSystem.type != sunSystem){
|
---|
571 | raining = false;
|
---|
572 | snowing = false;
|
---|
573 | weatherSystem.swap(sunSystem);
|
---|
574 | }
|
---|
575 |
|
---|
576 | if(weatherSystem.isSet() === true){
|
---|
577 | weatherSystem.update();
|
---|
578 | }
|
---|
579 |
|
---|
580 | camera.lookAt( new THREE.Vector3(scene.position.x+150, scene.position.y+1500, scene.position.z) );
|
---|
581 |
|
---|
582 | renderer.render( scene, camera );
|
---|
583 |
|
---|
584 | }
|
---|
585 |
|
---|
586 | </script>
|
---|
587 | </body>
|
---|
588 | </html> |
---|