Changeset 29547 for other-projects/nz-flag-design/trunk
- Timestamp:
- 2014-12-08T13:25:38+13:00 (9 years ago)
- Location:
- other-projects/nz-flag-design/trunk/render-3d
- Files:
-
- 5 added
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
other-projects/nz-flag-design/trunk/render-3d/Flag_files/Flag.js
r29475 r29547 341 341 ballPosition.x = Math.cos(Date.now()/200) * 70 342 342 343 if (sphere.visible)344 for (particles = cloth.particles, i=0, il = particles.length345 ;i<il;i++) {346 particle = particles[i];347 pos = particle.position;348 diff.subVectors(pos, ballPosition);349 if (diff.length() < ballSize) {350 // collided351 diff.normalize().multiplyScalar(ballSize);352 pos.copy(ballPosition).add(diff);353 }354 }355 356 343 // Pin Constrains 357 344 if(Boolean(pinning)){ -
other-projects/nz-flag-design/trunk/render-3d/flag.html
r29535 r29547 3 3 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 4 5 <title>three.js webgl - 3D Flag </title>5 <title>three.js webgl - 3D Flag hhh</title> 6 6 <meta charset="utf-8"> 7 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'> 8 11 <style> 9 12 body { … … 38 41 <a onclick="wind = !wind;">Wind</a> | 39 42 <a onclick="raining = !raining;">Rain</a> | 40 <a onclick="snowing = !snowing;">Snow</a>43 <a class="myButton" onclick="snowing = !snowing;">Snow</a> 41 44 42 45 </div> … … 98 101 var keyboard = new KeyboardState(); 99 102 var clothTextures = []; 100 101 /* testing cloth simulation */ 102 103 var flagRelease; 103 104 104 var initial = true; 105 105 106 106 var pins = []; 107 for (var j=0;j<=cloth.h;j++) 108 pins.push(cloth.index(0, j));109 107 for (var j=0;j<=cloth.h;j++){ 108 pins.push(cloth.index(0, j)); 109 } 110 110 /* Light variables */ 111 111 var light; … … 134 134 135 135 var clothGeometry; 136 var sphere;136 137 137 var object, tmpFlag, arrow; 138 138 … … 141 141 // array for holding existing flags 142 142 143 var flags = ["./images/flag.png", "./images/ random.png", "./images/canada.png"];143 var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"]; 144 144 var flagSelector = 0; 145 145 var materials; … … 184 184 185 185 light.castShadow = true; 186 light.shadowCameraVisible = true;186 light.shadowCameraVisible = false; 187 187 188 188 light.shadowMapWidth = 2048; … … 212 212 snowSystem = new snow(); 213 213 weatherSystem = new weatherSystem(scene); 214 //weatherSystem.set(rainSystem);215 216 214 217 215 /* ------------------ */ … … 222 220 for(i = 0; i < flags.length; i++){ 223 221 clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] ); 222 //clothTextures[i].needsUpdate = true; 224 223 clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping; 225 224 clothTextures[i].anisotropy = 16; … … 228 227 229 228 // weather 230 231 232 233 234 235 236 // sphere237 238 var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );239 var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff } );240 241 sphere = new THREE.Mesh( ballGeo, ballMaterial );242 sphere.castShadow = true;243 sphere.receiveShadow = true;244 //scene.add( sphere );245 229 246 230 // arrow … … 280 264 mesh.position.x = 0; 281 265 mesh.receiveShadow = true; 282 mesh.castShadow = true;266 mesh.castShadow = false; 283 267 scene.add( mesh ); 284 268 … … 289 273 mesh.position.x = 0; //125 290 274 mesh.receiveShadow = true; 291 mesh.castShadow = true;275 mesh.castShadow = false; 292 276 scene.add( mesh ); 293 277 … … 321 305 window.addEventListener( 'resize', onWindowResize, false ); 322 306 323 sphere.visible = !true324 325 307 } 326 308 327 309 // 310 var flag_toggle = 0; 328 311 329 312 function createFlag() { 330 331 // create materials332 materials = [333 new THREE.MeshPhongMaterial( { alphaTest: 0.5, ambient: 0xffffff, color: 0xffffff, specular: 0x030303, emissive: 0x111111, shininess: 20, perPixel: true, metal: false, map: clothTextures[flagSelector], side: THREE.DoubleSide } ),334 new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true, transparent: true, opacity: 0.9 } )335 ];336 313 337 338 339 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 ]; 340 320 341 321 // cloth geometry … … 352 332 object = new THREE.Mesh( clothGeometry, materials[ 0 ] ); 353 333 object.position.set( 0, 150, 0 ); 354 object.castShadow = true; 355 object.receiveShadow = true; 334 object.castShadow = false; 335 object.receiveShadow = false; 336 object.material.transparent = true; 337 object.material.opacity = 0.85; 356 338 scene.add( object ); 357 339 initial = false; … … 359 341 360 342 }else{ 361 setPinning(false); 362 flagRelease = setInterval(function () {switchFlag()}, 2000); 363 } 364 365 } 366 367 // 368 369 function switchFlag() { 370 371 scene.remove( object ); 372 setPinning(true); 373 object = new THREE.Mesh( clothGeometry, materials[ 0 ] ); 374 375 object.position.set( 0, 0, 0 ); 376 object.castShadow = true; 377 object.receiveShadow = true; 378 scene.add( object ); 379 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } ); 380 381 // stop the timer for calling this method 382 clearInterval(flagRelease); 383 } 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 384 350 385 351 // … … 441 407 clothGeometry.normalsNeedUpdate = true; 442 408 clothGeometry.verticesNeedUpdate = true; 443 444 sphere.position.copy( ballPosition ); 445 446 447 document.addEventListener( "mousemove", onMouseMove, false); 448 document.addEventListener( "mousedown", onMouseClick, false); 449 document.addEventListener( "mouseup", onMouseUp, false); 450 451 /*if(mouseDown === true){ 452 cameraRot += (clickPos - mouseX)/500; 453 cameraElevation += (clickPos - mouseY)/500; 454 if(cameraElevation > 180) cameraElevation = 0; 455 if(cameraElevation < 0 ) cameraElevation = 180; 456 if(cameraRot > 360) cameraRot = 0; 457 if(cameraRot < 0 ) cameraRot = 360; 458 camera.position.y = Math.sin(THREE.Math.degToRad(cameraElevation))*1500; 459 camera.position.x = Math.cos(THREE.Math.degToRad(cameraRot))*1500; 460 camera.position.z = Math.sin(THREE.Math.degToRad(cameraRot))*1500; 461 }*/ 409 410 462 411 463 412 if(raining && weatherSystem.type != rainSystem){ … … 478 427 479 428 } 480 481 function onMouseMove(){ 482 483 mouseX = event.clientX; 484 mouseY = event.clientY; 485 486 } 487 488 function onMouseClick(){ 489 mouseDown = true; 490 clickPos = event.clientX; 491 } 492 493 function onMouseUp(){ 494 mouseDown = false; 495 } 496 497 </script><div><canvas width="1366" height="600"></canvas><!--<div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="padding: 2px 0px 3px; background: transparent;"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">55 FPS</span> (0-60)</div><canvas width="74" height="30" style="display: none; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(8, 24, 8);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">16 MS</span> (1-607201)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div><div style="padding: 2px 0px 3px; display: none; background-color: rgb(24, 8, 13);"><div style="font-family: Helvetica, Arial, sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MEM</span> (10-10)</div><canvas width="74" height="30" style="display: block; margin-left: 3px;"></canvas></div></div></div><div><canvas height="932" width="1920"></canvas><div style="cursor: pointer; width: 80px; opacity: 0.9; z-index: 10001; position: absolute; top: 0px;"><div style="background: none repeat scroll 0% 0% transparent; padding: 2px 0px 3px;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(170, 170, 170); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">60 FPS</span> (30-69)</div><canvas style="display: none; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(8, 24, 8); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(0, 255, 0); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">10 MS</span> (5-504)</div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div><div style="background-color: rgb(24, 8, 13); padding: 2px 0px 3px; display: none;"><div style="font-family: Helvetica,Arial,sans-serif; text-align: left; font-size: 9px; color: rgb(255, 0, 128); margin: 0px 0px 1px 3px;"><span style="font-weight:bold">MEM</span></div><canvas style="display: block; margin-left: 3px;" height="30" width="74"></canvas></div></div>--></div> 498 429 430 </script><div><canvas width="1366" height="600"></canvas> 499 431 </body></html> -
other-projects/nz-flag-design/trunk/render-3d/weather/snow.js
r29475 r29547 14 14 15 15 // create the particle variables 16 this.particleCount = 1000,16 this.particleCount = 2000, 17 17 this.particles = new THREE.Geometry(), 18 18 … … 25 25 blending: THREE.AdditiveBlending, 26 26 transparent: true, 27 opacity: 0. 527 opacity: 0.9 28 28 }); 29 29 … … 33 33 // create a particle with random 34 34 // position values, -250 -> 250 35 var pX = Math.random() * window.innerWidth * 2- window.innerWidth,36 pY = Math.random() * window.innerHeight * 3- window.innerHeight,37 pZ = Math.random() * window.innerWidth * 2- window.innerWidth;35 var pX = Math.random() * window.innerWidth * 3 - window.innerWidth, 36 pY = Math.random() * window.innerHeight * 4 - window.innerHeight, 37 pZ = Math.random() * window.innerWidth * 3 - window.innerWidth; 38 38 this.particle = new THREE.Vector3(pX, pY, pZ); 39 39
Note:
See TracChangeset
for help on using the changeset viewer.