Class: Application

controller/Application~ Application

new Application(options)

Each instance controls one element of the DOM, besides creating the canvas for the three.js app it creates a dat.gui instance (to control objects of the app with a gui) and a Stats instance
Parameters:
Name Type Description
options Object An object containing the following:
Properties
Name Type Argument Default Description
selector string <optional>
 null A css selector to the element to inject the demo
width number <optional>
 window.innerWidth The width of the canvas
height number <optional>
 window.innerHeight The height of the canvas
injectCache boolean <optional>
 false True to add a wrapper over `THREE.Object3D.prototype.add` and `THREE.Object3D.prototype.remove` so that it catches the last element and perform additional operations over it, with this mechanism we allow the application to have an internal cache of the elements of the application
theme string <optional>
 'dark' Theme used in the default scene, it can be `light` or `dark`
helperOptions object <optional>
 {} Additional options for the ambient, see the class Coordinates
defaultSceneOptions object <optional>
 {} Additional options for the default scene created for this world
Source:

Members

__t3cache__ :Object

Application cache
Type:
  • Object
Source:

activeCamera :T3.model.Camera

The world can have many cameras, so the this is a reference to the active camera that's being used right now
Type:
  • T3.model.Camera
Source:

activeScene :THREE.Scene

The active scene of this world
Type:
  • THREE.Scene
Source:

cameras :Array

Reference to the cameras used in this world
Type:
  • Array
Source:

datgui :Object

Dat gui instance
Type:
  • Object
Source:

renderer :Object

THREE Renderer
Type:
  • Object
Source:

scenes :Object

Scenes in this world, each scene should be mapped with a unique id
Type:
  • Object
Source:

shell :LoopManager

Reference a game-shell instance
Type:
  • LoopManager
Source:

stats :Object

Reference to the Stats instance (needed to call update on the method module:controller/Application#update)
Type:
  • Object
Source:

theme :Object

Colors for the default scene
Type:
  • Object
Source:

Methods

addCamera(key, camera) → {Application}

Adds a camera to the pool of cameras, it needs to be a THREE.PerspectiveCamera or a THREE.OrthographicCamera
Parameters:
Name Type Description
key string
camera THREE.PerspectiveCamera | THREE.OrthographicCamera
Source:
Returns:
Type
Application

addScene(scene, key) → {this}

Adds a scene to the scene pool
Parameters:
Name Type Description
scene THREE.Scene
key string
Source:
Returns:
Type
this

createCameraControls(camera) → {this}

Creates OrbitControls over the `camera` passed as param
Parameters:
Name Type Description
camera THREE.PerspectiveCamera | THREE.OrtographicCamera
Source:
Returns:
Type
this

createDefaultCamera()

Create the default camera used in this world which is a `THREE.PerspectiveCamera`, it also adds orbit controls by calling #createCameraControls
Source:

createDefaultLights() → {this}

Creates some random lights in the default scene
Source:
Returns:
Type
this

createDefaultRenderer() → {this}

Creates the default THREE.WebGLRenderer used in the world
Source:
Returns:
Type
this

createDefaultScene() → {this}

Creates a scene called 'default' and sets it as the active one
Source:
Returns:
Type
this

gameShell() → {this}

Initializes the game loop by creating an instance of game-shell
Source:
Returns:
Type
this

getFromCache(name) → {THREE.Object3D}

Gets an object from the cache if `injectCache` was enabled and an object was registered with #cache
Parameters:
Name Type Description
name string
Source:
Returns:
Type
THREE.Object3D

getOptions() → {Object}

Getter for the initial options
Source:
Returns:
Type
Object

init()

Bootstrap the application with the following steps: - Enabling cache injection - Set the theme - Create the renderer, default scene, default camera, some random lights - Initializes dat.gui, Stats, a mask when the application is paised - Initializes fullScreen events, keyboard and some helper objects - Calls the game loop
Source:

initCoordinates()

Initializes the coordinate helper (its wrapped in a model in T3)
Source:

initDatGui() → {this}

Inits the dat.gui helper which is placed under the DOM element identified by the initial configuration selector
Source:
Returns:
Type
this

initStats() → {this}

Init the Stats helper which is placed under the DOM element identified by the initial configuration selector
Source:
Returns:
Type
this

injectCache(inject)

Wraps `THREE.Object3D.prototype.add` and `THREE.Object3D.prototype.remove` with functions that save the last object which `add` or `remove` have been called with, this allows to call the method `cache` which will cache the object with an identifier allowing fast object retrieval
Parameters:
Name Type Description
inject boolean True to enable this behavior
Source:
Example
var instance = t3.Application.run({
  injectCache: true,
  init: function () {
    var group = new THREE.Object3D();
    var innerGroup = new THREE.Object3D();

    var geometry = new THREE.BoxGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material);

    innerGroup
      .add(cube)
      .cache('myCube');

    group
      .add(innerGroup)
      .cache('innerGroup');

    // removal example
    // group
    //   .remove(innerGroup)
    //   .cache();

    this.activeScene
      .add(group)
      .cache('group');
  },

  update: function (delta) {
    var cube = this.getFromCache('myCube');
    // perform operations on the cube
  }
});

render()

Render phase, calls `this.renderer` with `this.activeScene` and `this.activeCamera`
Source:

setActiveCamera(key) → {this}

Updates the camera to be used to render the scene
Parameters:
Name Type Description
key string
Source:
Returns:
Type
this

setActiveScene(key) → {this}

Sets the active scene (it must be a registered scene registered with #addScene)
Parameters:
Name Type Description
key string The string which was used to register the scene
Source:
Returns:
Type
this

setTheme(name) → {this}

Sets the theme to be used in the default scene
Parameters:
Name Type Description
name string Either the string `dark` or `light`
Source:
Returns:
Type
this

tick()

tick, the place where the game logic happens, t3 updates the following for you - the stats helper - the camera controls if the active camera has one
Source: