topical media & game development
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.