topical media & game development

talk show tell print

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



  <!-- # Examples of tQuery.car.js -->
  
  <!-- ```tquery.car.js``` is a plugin provides rendering and controls of sport cars. -->
  <!-- It is based on some examples by [alteredq](http://alteredqualia.com/) in -->
  <!-- [three.js](http://github.com/mrdoob/three.js/). -->
  <!-- You can find them -->
  <!-- [here](http://mrdoob.github.com/three.js/examples/webgl_materials_cars.html) -->
  <!-- and -->
  <!-- [here](http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_dynamic.html). -->
  
  <!--  -->
  
  <!doctype html><title>tQuery Car Example</title>
  <script src="../../../build/tquery-bundle.js"></script>
  
  <script src='../../grassground/tquery.grassground.js'></script>
  
  <script src='../../shadowmap/tquery.light.shadowmap.js'></script>
  
  <script src="../../skymap/tquery.cubetexture.js"></script>
  <script src="../../skymap/tquery.skymap.js"></script>
  
  <script src="../../../vendor/three.js/postprocessing/EffectComposer.js"></script>
  <script src="../../../vendor/three.js/postprocessing/BloomPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/DotScreenPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/FilmPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/MaskPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/RenderPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/SavePass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/ShaderPass.js"></script>
  <script src="../../../vendor/three.js/postprocessing/TexturePass.js"></script>
  <script src="../../../vendor/three.js/shaders/BleachBypassShader.js"></script>
  <script src="../../../vendor/three.js/shaders/BlendShader.js"></script>
  <script src="../../../vendor/three.js/shaders/CopyShader.js"></script>
  <script src="../../../vendor/three.js/shaders/ColorifyShader.js"></script>
  <script src="../../../vendor/three.js/shaders/ColorifyShader.js"></script>
  <script src="../../../vendor/three.js/shaders/FilmShader.js"></script>
  <script src="../../../vendor/three.js/shaders/FXAAShader.js"></script>
  <script src="../../../vendor/three.js/shaders/HorizontalBlurShader.js"></script>
  <script src="../../../vendor/three.js/shaders/SepiaShader.js"></script>
  <script src="../../../vendor/three.js/shaders/VerticalBlurShader.js"></script>
  <script src="../../../vendor/three.js/shaders/VignetteShader.js"></script>
  <script src="../../pproc/tquery.effectcomposer.js"></script>
  
  <script src="../../minecraft/tquery.minecraftchar.js"></script>
  
  <script src="../../minecraft/tquery.animation.js"></script>
  <script src="../../minecraft/tquery.animations.js"></script>
  
  <script src="../../minecraft/tquery.minecraftcharanimations.js"></script>
  <script src="../../minecraft/tquery.minecraftcharheadanimations.js"></script>
  
  <script src="../../minecraft/tquery.spritesheet.js"></script>
  
  <body><script>
          var world        = tQuery.createWorld().boilerplate().start();
          // 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)));
  
          // enable shadow casting in world renderer
          world.tRenderer().shadowMapEnabled        = true;
          world.tRenderer().shadowMapSoft                = true;
  
          // 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);
  
          // add some posteffect
          world.addEffectComposer().vignette().finish();
  
          // add a skymap
          tQuery.createSkymap('skybox').addTo(world);
  
          var ground        = tQuery.createGrassGround({
                  textureUrl        : '../../grassground/images/grasslight-big.jpg',
                  textureRepeatX        : 10,
                  textureRepeatY        : 10,                
          }).addTo(world).scaleBy(100).receiveShadow(true);
          
          var character        = new tQuery.MinecraftChar({
                  skinUrl        : "../../minecraft/examples/images/agentsmith.png"
          });
          character.model.addTo(world)
          character.model.translateY(-0.5)
          tQuery('mesh', character.model).castShadow(true)
  // TODO
  // - shadow casting
  // - make it move with path
  // - keyboard control
  
          character.model.rotateY(-Math.PI/10);
          character.model.translateX(1);
          character.model.translateZ(0.5);
          character.model.translateY(0.5);
          
          
  
          var bodyAnims        = new tQuery.MinecraftCharAnimations(character);
          bodyAnims.start('hiwave');
  
          var headAnims        = new tQuery.MinecraftCharHeadAnimations(character);
          headAnims.start('yes');
  
          character.model.rotateY(-Math.PI/10);
  
  //        character.model.rotateY(-Math.PI);
  //        bodyAnims.start('walk')
  
          //world.loop().hook(function(delta, now){
          //        var angle        = 0.2*now * Math.PI*2;
          //        var positionX        = Math.cos(angle)*1
          //        var positionZ        = Math.sin(angle)*1
          //        character.model.position(positionX, 0.5, positionZ)
          //        character.model.get(0).rotation.y        = -angle;
          //})
          
          var items        = new tQuery.Spritesheet({
                  url        : '../../minecraft/examples/images/items/items.png',
                  imgW        : 256,
                  imgH        : 256,
                  spriteW        : 16,
                  spriteH        : 16
          });
          items.bind('load', function(){
                  var item        = items.createMesh(10,2).addTo(world);
                  //var item        = items.createMesh(0+0*16).addTo(world);
                  
                  //item.translateX(-0.5)
                  item.translateY(0.5)
                  item.castShadow(true);
                  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));
                  }
                  print(1,1, "Hello");
                  print(1,3, "TakeOff!");
                  
                  
                  
                  var url                = '../../grassground/images/grasslight-big.jpg';
                  var mesh        = tQuery.createPlane().addTo(item)
                          .geometry()
                                  //.rotateX(Math.PI/2)
                                  .translateX(1/16-0.5/16)
                                  .translateY(3/16 + 0.5/16)
                                  .translateZ(1/16+0.0002)
                                  .scaleBy(11/16+0.5/16, 7/16,1)
                                  .back()
                          .setBasicMaterial().ambient(0x444444).color(0xffffff).map(canvas).transparent(true).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.