Changeset 29547 for other-projects


Ignore:
Timestamp:
2014-12-08T13:25:38+13:00 (9 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 edited

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               
Note: See TracChangeset for help on using the changeset viewer.