topical media & game development

talk show tell print

mobile-query-three-plugins-flocking-examples-index.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <script src="birdgeometry.js"></script>
  <script src="boidflocking.js"></script>
  
  <script src='../../js/debug-bundle.js'></script>
  <script src='../../js/three-debug.js'></script>
  
  <body><div id="info">
          <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - port of birds demo
          <br/>
          Camera: B on bird - N for normal
  </div><script>
  require(['tquery.grassground', 'tquery.shadowmap', 'tquery.skymap'], function(){
          var world        = tQuery.createWorld().boilerplate().pageTitle('#info').start();
          var object	= tQuery.createTorus().addTo(world);
  
          
tquery.flocking.js - it is in fact a massive controller - you give it many object3d and they move - var flockingControls = new tQuery.FlockingControls(object3d[]) - create proper amount of boids - flockingControl.update() - .start()/.stop()

  
  
          world.tCamera().position.z        = 2;
  
          // enable shadow casting in world renderer
          world.tRenderer().shadowMapEnabled        = true;
          //world.tRenderer().shadowMapSoft        = false;
          
          tQuery.createSkymap('skybox').addTo(world);
  
          // add a light with shadow casting
          tQuery.createAmbientLight().addTo(world)
                  .color(0x444444);
                  
          tQuery.createDirectionalLight().addTo(world)
                  .position(20, 20, 20)
                  .color(0xffffff)
                  .castShadow(true)
                  .shadowMap(512*2,512*2)
                  .shadowCamera(15, -15, 15, -15, 0.01, 400)
                  //.shadowCameraVisible(true)
  
          tQuery.createDirectionalLight().addTo(world)
                  .position(20, 20, -20)
                  .color(0xffffff)
                  .castShadow(true)
                  .shadowMap(512*2,512*2)
                  .shadowCamera(15, -15, 15, -15, 0.01, 400)
                  //.shadowCameraVisible(true)
  
          tQuery.createGrassGround({
                  textureRepeatX        : 10,
                  textureRepeatY        : 10,
          }).addTo(world).scale(30).receiveShadow(true);
  
          var birds        = [];
          var boids        = [];
          var boidBoxW        = 500;
          var boidBoxH        = 50;
          var boidBoxD        = 500;
  
          var container        = tQuery.createObject3D().addTo(world)
                  .scale(10 * 1/boidBoxW);
  
          container.translateY(2 * 0.5 * boidBoxH * container.scaleX());
  
          for( var i = 0; i < 150; i ++ ){
                  // build boid
                  boids[ i ]        = new Boid();
                  var boid        = boids[i];
                  boid.position.x = boidBoxW * (Math.random()-0.5);
                  boid.position.y = boidBoxH * (Math.random()-0.5);
                  boid.position.z = boidBoxD * (Math.random()-0.5);
                  boid.velocity.x = 2/30 * (Math.random()-0.5);
                  boid.velocity.y = 2/30 * (Math.random()-0.5);
                  boid.velocity.z = 2/30 * (Math.random()-0.5);
                  boid.avoidWalls( true );
                  boid.setWorldSize( boidBoxW, boidBoxH, boidBoxD );
  
                  //var bird        = tQuery(new BirdGeometry(), new THREE.Material()).scale(1)
                  var bird        = tQuery.createCube(2,0.4,0.4).scale(10)
                          .castShadow(true)
                          .setLambertMaterial()
                                  .ambient(0x444444)
                                  .color(0xaa00aa)
                                  .side(THREE.DoubleSide)
                                  .back()
                          .addTo(container);
                          
                  birds.push( bird.get(0) )
                  // setup bird mesh
                  bird.get(0).phase        = Math.floor( Math.random() * 62.83 );
                  bird.get(0).position        = boids[ i ].position;
          }
          
          window.addEventListener('keydown', function(event){
                  if( event.keyCode === 'B'.charCodeAt(0) ){
                          world.getCameraControls() && world.getCameraControls().destroy();
                          world.removeCameraControls();
                          var idx        = Math.floor( birds.length * Math.random() );
                          tQuery(world.tCamera())
                                  .position(-1.5,0.4,0)
                                  .rotation(0,-Math.PI/2,0)
                                  .addTo(birds[idx])
                  }else if( event.keyCode === 'N'.charCodeAt(0) ){
                          world.getCameraControls() && world.getCameraControls().destroy();
                          world.removeCameraControls();
                          world.setCameraControls(new THREEx.DragPanControls(world.tCamera()));
                          tQuery(world.tCamera())
                                  .position(0,0,-3)
                                  .rotation(0,0,0)
                                  .addTo(world)                
                  }
          })
          
          
  
          // make boid move
          world.loop().hook(function(delta, now){
  
                  var vector = new THREE.Vector3(0,0,0)
                  for( var i = 0; i < boids.length; i++ ){
                          var boid        = boids[ i ];
                          boid.repulse( vector, 100 );
                  }
  
                  for( var i = 0, il = birds.length; i < il; i++ ){
                          var boid        = boids[ i ];
                          var bird        = birds[ i ];
  
                          // run this boids
                          boid.run( boids );
  
                          // set bird rotation depending on boid.velocity
                          bird.rotation.y        = Math.atan2( - boid.velocity.z, boid.velocity.x );
                          bird.rotation.z        = Math.asin( boid.velocity.y / boid.velocity.length() );
  //bird.position.y        = 5;
  //bird.rotation.y        = 0;
                          // make the wings moves
                          bird.phase        = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;
                          //bird.geometry.vertices[ 5 ].y = 
                          //bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;
  
                          var angle        = now;
                          bird.geometry.dynamic        = true
                          // bird.geometry.vertices[ 5 ].y        = 
                          // bird.geometry.vertices[ 4 ].y        = Math.sin( angle ) * 5;
                  }
          });
          
  })
  </script></body>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.