topical media & game development

talk show tell print

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



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <body><script>
  require(['tquery.text', 'tquery.linkify', 'tquery.checkerboard', 'tquery.videos', 'tquery.fog'], function(){
          var world        = tQuery.createWorld().boilerplate().start();
          var object	= tQuery.createTorus().addTo(world);        
  
          // no camera controls is needed
          world.removeCameraControls();
          world.tCamera().position.z                += 10;
          world.tCamera().position.y                += 2;
          world.tCamera().position.normalize().setLength(4)
          world.tCamera().lookAt(tQuery.createVector3(0,0.5,0));
  
          
          // add a fog
          world.addFogExp2({density : 0.05});
  
          // add some lights
          tQuery.createAmbientLight().addTo(world).color(0x444444);
          tQuery.createDirectionalLight().addTo(world).position(1,1,-1).color(0xFFFFFF);
          tQuery.createDirectionalLight().addTo(world).position(-1,1,1).color(0xffffff).intensity(1);
  
          // add a text
          var text        = tQuery.createText("tQuery").addTo(world)
                  .scaleBy(1/3)
                  .setLambertMaterial().ambient(0x444444).color(0xEE1289).back()
                  .rotateY(-Math.PI/3)
                  .translateX(1.3).translateY(0.5)
          // enable dom events
          world.enableDomEvent()
          // make it a link
          text.linkify('github.com/jeromeetienne/tquery/');
  
          // add a checkerboard on the ground
          tQuery.createCheckerboard({
                  segmentsW        : 100,        // number of segment in width
                  segmentsH        : 100        // number of segment in Height
          }).addTo(world).scaleBy(100);
  
          var fish = tQuery.createCube().addTo(world)
                  
                  .setLambertMaterial()
                          .map("../../assets/images/water.jpg")
                          //.map(tQuery.createVideoTexture('../../videos/examples/sintel.ogv'))
                          .color(0xFFFFFF)
                          //.opacity(0.5)
                          .back()
                  .translateY(1).translateZ(-1.5)
                  .id('fish')
          
          
          var turning        = true;
          fish.on('click', function(){
                  turning        = !turning;
          })
  
          tQuery.world.loop().hook(function(delta, now){
                  if( turning === false )        return;
                  var angleDiff        = 90 * delta * Math.PI / 180;
                  tQuery('#fish').rotateX(angleDiff*2).rotateY(angleDiff).rotateZ(angleDiff*2);
          });
  
          var texture        = tQuery.createWebcamTexture();
          //var texture        = tQuery.createTVSnowTexture();
          //var texture        = tQuery.createVideoTexture('../../videos/examples/sintel.ogv');
          tQuery.createCube(1.6,0.9,0.2).addTo(world)
                  .setBasicMaterial().map(texture).back()
                  .translateX(-1.3).translateY(0.5).translateZ(-0.4)
                  .rotateY(Math.PI/4)
                  .on('click', function(event){
                          var tObject3D        = event.target;
                          var videoElem        = tObject3D.material.map.image;
                          //console.log("click on cube", event, tObject.material.map)
                          var notPlaying        = videoElem.paused || videoElem.ended;
                          if(notPlaying)        videoElem.play();
                          else                videoElem.pause();
                  });
  });
  </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.