Class: Application

controller/Application~ Application

new Application(config)

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 (to view the current framerate)
Parameters:
Name Type Description
config Object An object containing the following:
Properties
Name Type Argument Default Description
id string <optional>
 null The id of the DOM element to inject the elements to
width number <optional>
 window.innerWidth The width of the canvas
height number <optional>
 window.innerHeight The height of the canvas
renderImmediately boolean <optional>
 true False to disable the game loop when the application starts, if you want to resume the loop call `application.loopManager.start()`
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
fullScreen boolean <optional>
 false True to make this app fullscreen adding additional support for window resize events
theme string <optional>
 'dark' Theme used in the default scene, it can be `light` or `dark`
ambientConfig object <optional>
 {} Additional configuration for the ambient, see the class Coordinates
defaultSceneConfig object <optional>
 {} Additional config 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 manager
Type:
  • Object
Source:

keyboard :Object

Keyboard manager
Type:
  • Object
Source:

loopManager :LoopManager

Reference to the local loop manager
Type:
  • LoopManager
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:

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

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

gameLoop() → {this}

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

getConfig() → {Object}

Getter for the initial config
Source:
Returns:
Type
Object

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

initApplication()

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

initFullScreen()

Binds the F key to make a world go full screen
Source:
To Do:
  • This should be used only when the canvas is active

initKeyboard() → {this}

Initis the keyboard helper
Source:
Returns:
Type
this

initMask() → {this}

Creates a mask on top of the canvas when it's paused
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
  }
});

maskVisible(v)

Updates the mask visibility
Parameters:
Name Type Description
v boolean True to make it visible
Source:

render()

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

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:
To Do:
  • Make the theme system extensible
Returns:
Type
this

update(delta)

Update phase, the world updates by default: - The stats helper - The camera controls if the active camera has one
Parameters:
Name Type Description
delta number The number of seconds elapsed
Source: