topical media & game development

talk show tell print

mobile-query-three-plugins-gsvpano-examples-ongamestartdemo.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <!-- TODO put that in require.js if possible. i tried and failed -->
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  
  <body><div id='info'>
          <a href='http://ongamestart.com' target='_blank'>onGameStart</a> Streets
          -
          <a href='github.com/spite/GSVPano.js' target='_blank'>GSVPano</a>
          from
          <a href='twitter.com/thespite' target='_blank'>@thespite</a>
          <br/>
          <a href='http://www.google.com/streetview' target='_blank'>Streeviews</a>
          by
          <a href='http://google.com' target='_blank'>google</a>
          -
          WebGL with <a href='http://mrdoob.github.com/three.js/' target='_blank'>three.js</a> thru
          <a href='http://jeromeetienne.github.com/tquery/' target='_blank'>tQuery API</a>
  </div><script>
  require(['tquery.gsvpano', 'tquery.minecraft', 'tquery.text', 'tquery.pproc'], function(){
          // create the world
          var world        = tQuery.createWorld().boilerplate().pageTitle('#info').start();
  
          // create GSVPano with the address of http://onGameStart.com venue
          var gsvpano        = tQuery.createGSVPano('ul. Klopotowskiego 36, warsaw');
          gsvpano.addEventListener('load', function(){
                  // create a sphere mapped with the streetview images
                  gsvpano.buildSkySphere().addTo(world);
                  // create the text
                  var text        = tQuery.createText("onGameStart!", {
                          bevelThickness        : 0.1,
                          bevelSize        : 0.03,
                          bevelEnabled        : true,
                  }).addTo(world).scaleBy(1/3).translateY(0.5)
                  // set the material
                  var material        = gsvpano.buildMaterial();
                  text.material(material);
          });
          
          // add minecraft character
          var character        = tQuery.createMinecraftChar({
                  skinUrl        : tQuery.MinecraftChar.baseUrl+'/examples/images/Mario.png'
          }).addTo(world);
          character.object3D('root').translateX(-0.3).translateY(-0.8).rotateY(Math.PI/10)
          // animate character
          new tQuery.MinecraftCharAnimations(character).start('hiwave');
          new tQuery.MinecraftCharHeadAnimations(character).start('yes');
  
          // add post processing
          world.addEffectComposer().bloom(0.8).vignette().finish();
  });
  </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.