Changeset 29547

Show
Ignore:
Timestamp:
08.12.2014 13:25:38 (4 years ago)
Author:
bmt11
Message:

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

Location:
other-projects/nz-flag-design/trunk/render-3d
Files:
5 added
5 modified

Legend:

Unmodified
Added
Removed
  • other-projects/nz-flag-design/trunk/render-3d/Flag_files/Flag.js

    r29475 r29547  
    341341    ballPosition.x = Math.cos(Date.now()/200) * 70 
    342342 
    343     if (sphere.visible) 
    344     for (particles = cloth.particles, i=0, il = particles.length 
    345             ;i<il;i++) { 
    346         particle = particles[i]; 
    347         pos = particle.position; 
    348         diff.subVectors(pos, ballPosition); 
    349         if (diff.length() < ballSize) { 
    350             // collided 
    351             diff.normalize().multiplyScalar(ballSize); 
    352             pos.copy(ballPosition).add(diff); 
    353         } 
    354     } 
    355  
    356343    // Pin Constrains 
    357344    if(Boolean(pinning)){ 
  • other-projects/nz-flag-design/trunk/render-3d/flag.html

    r29535 r29547  
    33<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    44 
    5         <title>three.js webgl - 3D Flag</title> 
     5        <title>three.js webgl - 3D Flag hhh</title> 
    66        <meta charset="utf-8"> 
    77        <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'> 
    811        <style> 
    912            body { 
     
    3841            <a onclick="wind = !wind;">Wind</a> | 
    3942            <a onclick="raining = !raining;">Rain</a> | 
    40             <a onclick="snowing = !snowing;">Snow</a> 
     43            <a class="myButton" onclick="snowing = !snowing;">Snow</a> 
    4144             
    4245        </div> 
     
    98101            var keyboard = new KeyboardState(); 
    99102            var clothTextures = []; 
    100              
    101             /* testing cloth simulation */ 
    102              
    103             var flagRelease; 
     103 
    104104            var initial = true; 
    105105             
    106106            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            } 
    110110            /*  Light variables   */ 
    111111            var light; 
     
    134134 
    135135            var clothGeometry; 
    136             var sphere; 
     136             
    137137            var object, tmpFlag, arrow; 
    138138 
     
    141141            // array for holding existing flags 
    142142             
    143             var flags = ["./images/flag.png", "./images/random.png", "./images/canada.png"]; 
     143            var flags = ["./images/flag.png", "./images/flag2.png", "./images/canada.png"]; 
    144144            var flagSelector = 0; 
    145145            var materials; 
     
    184184 
    185185                light.castShadow = true; 
    186                 light.shadowCameraVisible = true; 
     186                light.shadowCameraVisible = false; 
    187187 
    188188                light.shadowMapWidth = 2048; 
     
    212212                snowSystem = new snow(); 
    213213                weatherSystem = new weatherSystem(scene); 
    214                 //weatherSystem.set(rainSystem); 
    215              
    216214             
    217215                /* ------------------ */ 
     
    222220                for(i = 0; i < flags.length; i++){ 
    223221                    clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] ); 
     222                    //clothTextures[i].needsUpdate = true; 
    224223                    clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping; 
    225224                    clothTextures[i].anisotropy = 16; 
     
    228227                 
    229228                // weather 
    230                  
    231  
    232                  
    233                  
    234                  
    235  
    236                 // sphere 
    237  
    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 ); 
    245229 
    246230                // arrow 
     
    280264                mesh.position.x = 0; 
    281265                mesh.receiveShadow = true; 
    282                 mesh.castShadow = true; 
     266                mesh.castShadow = false; 
    283267                scene.add( mesh ); 
    284268 
     
    289273                mesh.position.x = 0; //125 
    290274                mesh.receiveShadow = true; 
    291                 mesh.castShadow = true; 
     275                mesh.castShadow = false; 
    292276                scene.add( mesh ); 
    293277 
     
    321305                window.addEventListener( 'resize', onWindowResize, false ); 
    322306 
    323                 sphere.visible = !true 
    324  
    325307            } 
    326308             
    327309            // 
     310            var flag_toggle = 0; 
    328311             
    329312            function createFlag() { 
    330              
    331                 // create materials 
    332                 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                 ]; 
    336313     
    337                  
    338                  
    339314                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                    ]; 
    340320                     
    341321                    // cloth geometry 
     
    352332                    object = new THREE.Mesh( clothGeometry, materials[ 0 ] ); 
    353333                    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; 
    356338                    scene.add( object ); 
    357339                    initial = false; 
     
    359341                 
    360342                }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             
    384350 
    385351            // 
     
    441407                clothGeometry.normalsNeedUpdate = true; 
    442408                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 
    462411                 
    463412                if(raining && weatherSystem.type != rainSystem){ 
     
    478427 
    479428            } 
    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> 
    499431</body></html> 
  • other-projects/nz-flag-design/trunk/render-3d/weather/snow.js

    r29475 r29547  
    1414         
    1515            // create the particle variables 
    16             this.particleCount = 1000, 
     16            this.particleCount = 2000, 
    1717            this.particles = new THREE.Geometry(), 
    1818             
     
    2525                blending: THREE.AdditiveBlending, 
    2626                transparent: true, 
    27                 opacity: 0.5 
     27                opacity: 0.9 
    2828            }); 
    2929 
     
    3333                // create a particle with random 
    3434                // 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; 
    3838                    this.particle = new THREE.Vector3(pX, pY, pZ);   
    3939