topical media & game development

talk show tell print

mobile-query-three-plugins-minecraft-examples-post.htm / htm



  <!doctype html><title>Example for tQuery.minecraft plugins</title>
  <script src="../../../build/tquery-bundle.js"></script>
  <script src="../tquery.minecraftchar.js"></script>
  
  <script src="../../../vendor/three.js/ShaderExtras.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="../../pproc/tquery.effectcomposer.js"></script>
  
  <body><div id="info">
          Example of tQuery.minecraft plugins<br/>
          <a href="../../../www/vendor/doccoviewer/#../../../plugins/minecraft/examples/post.html" target="_blank">Annotated Source</a>
  </div>
  <div style="position: absolute; font-size: 200%; right: 0;">
          <select id="skinSelect" onchange='character.loadSkin(this.value);'>
                  <option value="images/char.png">char</option>
                  <option value="images/3djesus.png">3djesus</option>
                  <option value="images/agentsmith.png">agentsmith</option>
                  <option value="images/batman.png">batman</option>
                  <option value="images/god.png">god</option>
                  <option value="images/jamesbond-1.png">jamesbond-1</option>
                  <option value="images/Joker.png">Joker</option>
                  <option value="images/Mario.png">Mario</option>
                  <option value="images/martialartist.png">martialartist</option>
                  <option value="images/robocop.png">robocop</option>
                  <option value="images/Sonicthehedgehog.png">Sonic the hedgehog</option>
                  <option value="images/Spiderman.png">Spiderman</option>
                  <option value="images/Superman.png">Superman</option>
                  <option value="images/theflash.png">theflash</option>
                  <option value="images/woody.png">woody</option>
          </select>
  </div><script>
          // ## Let's start coding
  
          // We start to create our world as usual. This initialize the renderer, the camera,
          // its controls and a rendering loop.
          // We setup the 
          // [boilerplate for three.js](http://learningthreejs.com/blog/2012/01/19/boilerplate-builder-for-three-js/)
  	// and add a page title with some info on our little 3D demo.
          // We just put the camera a little closer to scene center. Thus the character
          // will be bigger on screen. We just can't get enougth of it, can we ;)
          var world        = tQuery.createWorld().boilerplate().pageTitle('#info').start();
          world.tCamera().position.z        = 1.8;
  
          // Now we add a bit of post processing. It is the first time
          // we talk about this, so let's details it a bit.
          // What is post processing (in a 3d context) ?
          // Post processing is performed after rendering the 3D, hence the name.
          // It applies on the screen as a whole. So the effects are in 2D.
          // What's it not ?
          // So It isn't for 3d effect on specific objects in your world.
          // 
          // ```tquery.effectcomposer.js``` plugin provides a simple api to add 
          // postprocessing to our world. It is a chained API on top of 
          // [three.js effect composer](github.com/mrdoob/three.js/tree/master/examples/js/postprocessing). 
          // In our case, we first apply ```.sepia()``` to change the colors toward 
          // [sepia color](http://en.wikipedia.org/wiki/Sepia_\(color\)).
  	// Then we apply ```.vignette()``` and mark the effects list
          // as finished. Not too hard hey ;)
          world.addEffectComposer().sepia().vignette().finish();
  
          // ## Hello Steve!
  
          // Now that we go a world. We will create a minecraft character.
          // In fact, minecraft main character is called ['steve'](http://www.minecraftwiki.net/wiki/The_Player).
  	// ```tQuery.MinecraftChar``` is the main class. It will create 
          // a character model and expose all its limbs too e.g right legs or right arms.
          // More on that later.
          // As you can see, we specify ```skinUrl``` parameter. It should point to the 
          // image of the skin texture. You can change it anytime with ```character.loadSkin(skinUrl)```
          var character        = new tQuery.MinecraftChar({
                  skinUrl        : 'images/3djesus.png'
          }); 
          // Now that we got our character setup, we just need to include it in our 3D world.
          character.model.addTo(world);
  
          // ## Make this model moves
  
          // So we talked about exposed limbs... kinda gross, almost disturbing :)
          // In fact it just means each part of our model is exposed for you to 
          // play with. It has the head, legs right and left, and the same for the arms.
          // It is all in ```character.parts```.
  
          // So the first step is to hook a function in the world rendering loop.
          // two parameters are passed ```delta``` and ```now```. ```delta``` is the number
          // of seconds since the last iteration of the rendering loop. ```now``` is the absolute
          // time in seconds.
          // We use those values to tune the animation. Thus it will be animated at the same
          // speed no matter the [fps](http://en.wikipedia.org/wiki/Frame_rate) rate of your computer.
  
          world.loop().hook(function(delta, now){
                  var angle        = 1/2 * now*Math.PI*2;
                  character.parts.armR.rotation.x        = 1.4 * Math.cos(angle + Math.PI);
                  character.parts.armL.rotation.x        = 1.4 * Math.cos(angle);
          });
  
          world.loop().hook(function(delta, now){
                  character.parts.headGroup.rotation.x        = Math.sin(now*1.5)/3;
                  character.parts.headGroup.rotation.y        = Math.sin(now)/3;
          }); 
          
          // Now we make the legs move to get the character walking... It is essentially the 
          // same as the arms. 
          world.loop().hook(function(delta, now){
                  var angle        = 1/2 * now*Math.PI*2;
                  character.parts.legR.rotation.x        = 1.4 * Math.cos(angle);
                  character.parts.legL.rotation.x        = 1.4 * Math.cos(angle + Math.PI);
          });
  
  </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.