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