topical media & game development

talk show tell print

mobile-query-three-plugins-planets-examples-demo.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <body><div id='info' style='color:white'>
          Examples of tQuery.planets plugin
          <br/>
          Largely copied on
          <a href="http://mrdoob.github.com/three.js/examples/webgl_trackballcamera_earth.html">three's trackballcamera example</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.planets'], function(){
          var world        = tQuery.createWorld().boilerplate().pageTitle('#info').start();
          // set the world background in black
          world.tRenderer().setClearColorHex( 0x000000, 1 );
  
          // make camera controls go smoother
          var controls        = world.getCameraControls();
          controls.rangeX        *= 0.03;
          controls.rangeY        *= 0.03;
          
          world.tCamera().position.z        = 2;
          
          // setup light
          tQuery.createDirectionalLight().addTo(world).position(1,1,1);
          tQuery.createDirectionalLight().addTo(world).position(-1,1,1);
          tQuery.createAmbientLight().addTo(world).color(0xFFFFFF);
  
          // create the moon
          var moon        = tQuery.createPlanet('moon').addTo(world).scale(1/4)
          // make the object rotate
          world.loop().hook(function(delta, now){
                  // handle rotation
                  var angle        = 0.1 * now * Math.PI * 2;
                  moon.rotationY(-angle)
                  // handle revolution
                  var angle        = 0.1 * now * Math.PI * 2;
                  moon.positionX( 0.7 * Math.cos(angle) ).positionZ( 0.7 * Math.sin(angle) )
          });
          
          // add planets
          var planet        = tQuery.createPlanet('earthNormal').id('planet').addTo(world)
          var cloud        = tQuery('.cloud', planet);
          planet.get(0).eulerOrder = 'XZY';
          // make the object rotate
          world.loop().hook(function(delta, now){
                  // handle planet rotation
                  var angle        = 0.05 * now * Math.PI * 2;
                  planet.rotationY(angle).rotationZ(23.1 * Math.PI/180);
                  // handle rotation cloud
                  var angle        = 0.01 * now * Math.PI * 2;
                  cloud.rotationY(-angle); 
          });
  });
  </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.