topical media & game development
mobile-query-three-plugins-minecraft-examples-index.htm / htm
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle.js"></script>
<script src="../tquery.minecraftchar.js"></script>
<script src="../tquery.spritesheet.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>
<body><div style="position: absolute; font-size: 200%; right: 0; z-index: 1">
<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/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>
<option value="images/Iron-Man-Minecraft-Skin.png">ironman</option>
</select>
</div><script>
var world = tQuery.createWorld().boilerplate().start();
world.tCamera().position.z = 1.8;
// load the minecraft character
// ```character.loadSkin(imageUrl)```
var character = tQuery.createMinecraftChar({
skinUrl : 'images/3djesus.png'
}).addTo(world);
// add the model to our world
character.object3D('root').translateY(-0.5);
// add post processing
world.addEffectComposer()
.sepia()
//.film(0.5, 0.25, 648, false)
.vignette()
.finish();
// initiate a spritesheet
var items = new tQuery.Spritesheet({
url : 'images/items/items.png',
imgW : 256,
imgH : 256,
spriteW : 16,
spriteH : 16
});
// once the spritesheet is loaded,
items.bind('load', function(){
var item = items.createMesh(2, 6).scaleBy(1/2);
item.position(0,-9/35,6/35).rotation(Math.PI/2,Math.PI/2,Math.PI/4)
var item = items.createMesh(5, 8).scaleBy(1/2);
item.position(0,-12/35,0/35).rotation(Math.PI/2,Math.PI/2,Math.PI/4)
item.addTo(character.parts.armR);
});
// make the head move
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;
});
// make the legs move
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);
});
// make the arms move
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);
});
</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.