topical media & game development
mobile-query-three-plugins-gsvpano-examples-ongamestartdemo.htm / htm
<!doctype html><title>Minimal tQuery Page</title>
<script src="../../../build/tquery-bundle-require.js"></script>
<!-- TODO put that in require.js if possible. i tried and failed -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<body><div id='info'>
<a href='http://ongamestart.com' target='_blank'>onGameStart</a> Streets
-
<a href='github.com/spite/GSVPano.js' target='_blank'>GSVPano</a>
from
<a href='twitter.com/thespite' target='_blank'>@thespite</a>
<br/>
<a href='http://www.google.com/streetview' target='_blank'>Streeviews</a>
by
<a href='http://google.com' target='_blank'>google</a>
-
WebGL with <a href='http://mrdoob.github.com/three.js/' target='_blank'>three.js</a> thru
<a href='http://jeromeetienne.github.com/tquery/' target='_blank'>tQuery API</a>
</div><script>
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("onGameStart!", {
bevelThickness : 0.1,
bevelSize : 0.03,
bevelEnabled : true,
}).addTo(world).scaleBy(1/3).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(0.8).vignette().finish();
});
</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.