topical media & game development

talk show tell print

mobile-query-three-plugins-flamethrower-examples-step45.htm / htm



  <!--
  
last but not least Add a Reactor Flame what is fireworks.js render particles in various output tquery, three.js, canvas2d emitter which emit particles combo emitter which emit particles

  * localized sound
  * webaudio api for the win
  -->
  <!doctype html><title>Flying to the moon</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <script src="vendor/tquery/ColladaLoader.js"></script>
  <script src="../vendor/fireworks-bundle.js"></script>
  <script src="../vendor/fireworks-comboemitter.js"></script>
  <script src="../vendor/fireworks-comboemitter-flamethrower.js"></script>
  <script src="../tquery.textureutils.js"></script>
  <body><script>
  require(['tquery.skymap', 'tquery.webaudio', 'tquery.lensflare'], function(){
          // init world
          var world        = tQuery.createWorld().boilerplate().start();
          world.tCamera().position.z        = -30;
  
          // create the container for the comboemitter
          var container        = tQuery.createObject3D().addTo(world)
  
          // create flame thrower
          var flamethrower= new Fireworks.ComboEmitter.Flamethrower({
                  webaudio: world.getWebAudio(),        // give it the audio
                  onReady        : function(){
                          flamethrower.start();        // start it once all is loaded
                  }
          });
          // add flamethrower to our container
          container.add( flamethrower.object3D() )
  
          // make the sound follow this._container
          WebAudio.isAvailable && flamethrower.sound().volume(0.1).follow(container, world);
  
          // add lensflare in the sun
          tQuery.createLensFlare().addTo(world) 
                  .position(tQuery.createVector3().set(-15, 24, 30).setLength(500) )
  
          // if webaudio is available in your browser
          if( WebAudio.isAvailable ){
                  // enable webaudio
                  world.enableWebAudio();
                  // load sound track
                  var url        = 'sounds/flymetothemoon.m4a';
                  tQuery.createSound().load(url, function(sound){
                          sound.loop(true).volume(4).play();
                  });                
          }
  
          // load the rockets
          var loader        = new THREE.ColladaLoader();
          loader.options.convertUpAxis = true;
          var url                = "./models/TINTINROCKET/models/TIN TIN ROCKET.dae"
          loader.load(url, function( collada ){
                  tQuery(collada.scene).scale(0.2)
                          .rotateX(Math.PI/2).rotateY(Math.PI/3)
                          .translateZ(-5)
                          .addTo(container);
          });
          
          // add lights
          tQuery.createAmbientLight().addTo(world).color(0x222222);        
          tQuery.createDirectionalLight().addTo(world)
                  .color(0xcccccc).position(1, 1, 1);
          tQuery.createDirectionalLight().addTo(world)
                  .color(0xcccccc).position(-1, 1, -1);
  
          // add a skymap
          var skymap        = tQuery.createSkymap('mars').addTo(world);
  
          // drunk effect
          world.loop().hook(function(delta, now){
                  var angle        = 0.2 * now * Math.PI/2;
                  // change the position of the rocket
                  var objPosition        = container.get(0).position;
                  objPosition.x        = Math.cos(angle*2)*Math.cos(angle)*20;
                  objPosition.z        = Math.sin(angle)*10;
                  // change the camera position
                  var camPosition        = world.tCamera().position;
                  camPosition.x        = 2 * (Math.sin(angle*2.45)*Math.sin(angle*1.3)*2 - 1);
                  camPosition.y        = -10 + Math.sin(angle*2.45)*Math.sin(angle*1.3)*25;
                  camPosition.z        = -40 + 5 + Math.sin(angle*2)*10;
          });
  });
  </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.