topical media & game development

talk show tell print

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



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <body><script>
  require(['tquery.pproc', 'tquery.skymap', 'tquery.grassground', 'tquery.shadowmap', 'tquery.minecraft'], function(){
          var world        = tQuery.createWorld().boilerplate().start();
          // enable shadow
          world.shadowMapEnabled(true);
  
          // no camera controls is needed
          world.removeCameraControls();
          world.tCamera().position.y        = 5;
          world.tCamera().position.z        = 15;
          world.tCamera().position.normalize().setLength(2.5)
          world.tCamera().lookAt(world.tScene().position.clone().addSelf(new THREE.Vector3(0.5,0.5,0)));
  
          // add a light with shadow casting
          var light        = tQuery.createDirectionalLight().addTo(world)
                  .position(2, 10, 10).color(0xffffff).intensity(0.6)
                  .castShadow(true)
                  .shadowDarkness(0.6)
                  .shadowMap(512,512)
                  .shadowBias(0.01)
                  .shadowCamera(2, -2, 2, -2, 0.1, 50)
                  //.shadowCameraVisible(true)
  
          // add some posteffect
          world.addEffectComposer().vignette().finish();
  
          // add a skymap
          tQuery.createSkymap('mars').addTo(world);
  
          // add a ground
          tQuery.createGrassGround({
                  textureRepeatX        : 10,
                  textureRepeatY        : 10,
          }).addTo(world).scaleBy(100).receiveShadow(true);
  
          var character        = new tQuery.MinecraftChar({
                  skinUrl        : "../../minecraft/examples/images/agentsmith.png"
          });
          var character3D        = character.object3D();
          character3D.addTo(world)
          tQuery('mesh', character3D).castShadow(true)
          // set character position
          character3D.translateX(1).translateZ(0.5)
                  .rotateY(-Math.PI/10);
  
          // start a body animation
          var bodyAnims        = new tQuery.MinecraftCharAnimations(character);
          bodyAnims.start('hiwave');
          // start a head animation
          var headAnims        = new tQuery.MinecraftCharHeadAnimations(character);
          headAnims.start('yes');
  
          // load the spritesheet
          var items        = new tQuery.Spritesheet({
                  url        : '../../minecraft/examples/images/items/items.png',
                  imgW        : 256,
                  imgH        : 256,
                  spriteW        : 16,
                  spriteH        : 16
          });
          items.bind('load', function(){
                  // get the board
                  var item        = items.createMesh(10,2).addTo(world)
                                          .translateY(0.5)
                                          .castShadow(true);
                  // draw board front
                  var canvas        = document.createElement('canvas');
                  var context        = canvas.getContext('2d');
                  context.fillStyle        = "rgba(80, 48, 32, 1)";
                  context.fillRect(0, 0, canvas.width, canvas.height);  
                  context.fillStyle        = "rgb(230,230,230)"; 
                  context.font        = "900 "+(24*1.5)+"px Arial";
                  var print        = function(x, y, text){
                          context.fillText(text, 8+(16*x), 28+(28*y));
                  }
                  var destinator        = location.hash ? location.hash.substr(1) : 'tQuery!';
                  print(1,1, "Hello");
                  print(1,3, destinator);
                  
                  // add the front to the item
                  var mesh        = tQuery.createPlane().addTo(item)
                          .geometry()
                                  .translateX(1/16-0.5/16).translateY(3/16 + 0.5/16).translateZ(1/16+0.0002)
                                  .scaleBy(11/16+0.5/16, 7.5/16,1)
                                  .back()
                          .setBasicMaterial()
                                  .map(canvas)
                                  .back()
                          .castShadow(true)
          });
  });
  </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.