onGameStart Street Teaser

teaser for onGameStart workwhop

HTML

<!doctype html><script src="http://jeromeetienne.github.com/tquery/build/tquery-bundle-require.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// trick to get cors on github content
requirejs.config({ baseUrl : "http://www.corsproxy.com/jeromeetienne.github.com/tquery/plugins/requirejs/examples/" });
</script>
<body><div id='info' style='font-size:140%; color: white;'>
    Wanna Learn how to do that ?<br/>
    Come to our 3D Game
    <a href='http://www.amiando.com/onGameStart2012.html' style='color: inherit;' target='_blank'>Workshop</a> at
        <a href='http://ongamestart.com' target='_blank' style='color: inherit;'>onGameStart</a> 
!!!
</div></body>

JavaScript

require(['tquery.gsvpano', 'tquery.minecraft', 'tquery.text', 'tquery.pproc'], function(){
    // create the world
    var world    = tQuery.createWorld().boilerplate().pageTitle('#info').start();

    // create GSVPano with the address of http://onGameStart.com venue
    var gsvpano    = tQuery.createGSVPano('ul. Klopotowskiego 36, warsaw');
    gsvpano.addEventListener('load', function(){
        // create a sphere mapped with the streetview images
        gsvpano.buildSkySphere().addTo(world);
        // create the text
        var text    = tQuery.createText("What the heck?").addTo(world)
            .scaleBy(1/5).translateY(0.5)
        // set the material
        var material    = gsvpano.buildMaterial();
        text.material(material);
    });
    
    // add minecraft character
    var character    = tQuery.createMinecraftChar({
        skinUrl    : tQuery.MinecraftChar.baseUrl+'/examples/images/Mario.png'
    }).addTo(world);
    character.object3D('root')
        .translateX(+0.3).translateY(-0.8)
        .rotateY(-Math.PI/10)
    // animate character
    new tQuery.MinecraftCharAnimations(character).start('hiwave');
    //new tQuery.MinecraftCharHeadAnimations(character).start('yes');

    // add post processing
    world.addEffectComposer().bloom(1).vignette().finish();
});