topical media & game development
mobile-query-three-plugins-boilerplate-tquery.world.boilerplate.js / js
// backward compatibility only
tQuery.World.registerInstance('fullpage', function(){
console.log("world.fullpage() is obsolete. use world.boilerplate() instead.");
return this.boilerplate();
});
tQuery.World.registerInstance('boilerplate', function(opts){
// put renderer fullpage
var domElement = document.body;
domElement.style.margin = "0";
domElement.style.padding = "0";
domElement.style.overflow = 'hidden';
this.appendTo(domElement);
this._renderer.setSize( domElement.offsetWidth, domElement.offsetHeight );
// add the boilerplate
this.addBoilerplate(opts);
// for chained API
return this;
});
Define a page title
tQuery.World.registerInstance('pageTitle', function(element){
// handle parameters polymorphism
if( typeof(element) === 'string' ){
element = document.querySelector(element);
}
// sanity check
console.assert( element instanceof HTMLElement, ".pageTitle(element) needs a HTMLElement");
// set element.style
element.style.position = "absolute";
element.style.width = "100%";
element.style.textAlign = "center";
element.style.fontWeight= "bolder";
element.style.fontColor = "white";
element.style.paddingTop= "0.5em";
element.style.fontFamily= "arial";
// for chained API
return this;
});
tQuery.World.registerInstance('devicePixelRatio', function(ratio){
// change devicePixelRatio
var tRenderer = this.tRenderer();
tRenderer.devicePixelRatio = ratio;
// get context
var ctx = tQuery.data(this, '_boilerplateCtx');
var windowResize= ctx.windowResize;
windowResize.trigger();
// for chained API
return this;
});
tQuery.World.registerInstance('addBoilerplate', function(opts){
var _this = this;
// sanity check - no boilerplate is already installed
console.assert( this.hasBoilerplate() !== true );
// handle parameters
opts = tQuery.extend(opts, {
stats : true,
cameraControls : true,
windowResize : true,
screenshot : true,
fullscreen : true
});
// get the context
var ctx = {};
// make tRenderer.domElement style "display: block" - by default it is inline-block
// - so it is affected by line-height and create a white line at the bottom
this.tRenderer().domElement.style.display = "block"
// create the context
tQuery.data(this, '_boilerplateCtx', ctx);
// get some variables
var tCamera = this.tCamera();
var tRenderer = this.tRenderer();
// add Stats.js - github.com/mrdoob/stats.js
if( opts.stats ){
ctx.stats = new Stats();
ctx.stats.domElement.style.position = 'absolute';
ctx.stats.domElement.style.bottom = '0px';
tRenderer.domElement.parentNode && tRenderer.domElement.parentNode.appendChild( ctx.stats.domElement );
ctx.loopStats = function(){
ctx.stats.update();
};
this.loop().hook(ctx.loopStats);
}
// create a camera contol
if( opts.cameraControls ){
ctx.cameraControls = new THREEx.DragPanControls(tCamera);
this.setCameraControls(ctx.cameraControls);
}
// transparently support window resize
if( opts.windowResize ){
ctx.windowResize = THREEx.WindowResize.bind(tRenderer, tCamera);
}
// allow 'p' to make screenshot
if( opts.screenshot ){
ctx.screenshot = THREEx.Screenshot.bindKey(tRenderer);
}
// allow 'f' to go fullscreen where this feature is supported
if( opts.fullscreen && THREEx.FullScreen.available() ){
ctx.fullscreen = THREEx.FullScreen.bindKey();
}
// bind 'destroy' event on tQuery.world
ctx._onDestroy);
// remove stats.js
ctx.stats && document.body.removeChild(ctx.stats.domElement );
ctx.stats && this.loop().unhook(ctx.loopStats);
// remove camera
ctx.cameraControls && this.removeCameraControls()
// stop windowResize
ctx.windowResize && ctx.windowResize.stop();
// unbind screenshot
ctx.screenshot && ctx.screenshot.unbind();
// unbind fullscreen
ctx.fullscreen && ctx.fullscreen.unbind();
});
(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.