API Docs for: 0.7.0

Model

Extends Component
Defined in: src/models/model.js:1
Module: models
Parent Module: xeogl

A Model is a collection of Components.

Overview

  • A Model owns the components that are added to it, automatically destroying them when the Model is destroyed.
  • Can be attached to a Transform hierarchy, to transform its components as a group, within World-space.
  • Provides the collective axis-aligned World-space boundary of its components.

A Model is subclassed by (at least):

  • GLTFModel, which loads its components from glTF files.
  • OBJModel, which loads its components from .OBJ and .MTL files.
  • SceneJSModel, which loads its components from SceneJS scene definitions.
  • BuildableModel, which provides a fluent API for building its components.

Usage

Adding and Removing Components

When adding components to a Model, it's usually easiest to just add their configuration objects and let the Model internally instantiate them, as shown below.

As mentioned, a Model owns all the components added to it, destroying them when we destroy the Model or call the Model's destroyAll method.

var model = new xeogl.Model({ // Create Model in xeogl's default Scene
    id: "myModel"
});

var geometry = model.add({
   type: "xeogl.TorusGeometry"
});

var material = model.add({
   type: "xeogl.PhongMaterial"
   diffuse: [0.4, 0.4, 9.0]
});

model.add({
   type: "xeogl.Entity",
   geometry: geometry,
   material: material
});

As shown below, we can also add our own component instances, supplying them either by reference or ID.

Note that the components must be in the same Scene as the model.

// Add by instance
var myEntity = new xeogl.Entity({
   geometry: geometry,
   material: material
});
model.add(myEntity);

// Add by ID
new xeogl.Entity({
   id: "myEntity",
   geometry: geometry,
   material: material
})
model.add("myEntity");

We can also add components all in one shot, via the Model's constructor:

model = new xeogl.Model({
   id: "myModel",
   components: [
       {
           type: "xeogl.TorusGeometry",
           id: "myGeometry"
       },
       {
           type: "xeogl.PhongMaterial",
           id: "myMaterial",
           diffuse: [0.4, 0.4, 0.9]
       },
       {
           type: "xeogl.Entity",
           id: "myEntity",
           geometry: "myGeometry",
           material: "myMaterial"
       }
   ]
});

Finding Models in Scenes

Our Model will now be registered by ID on its Scene, so we can now find it like this:

   model = xeogl.scene.models["myModel"];

That's assuming that we've created the Model in the default xeogl Scene, which we did for these examples.

Finding Components in Models

Our Model now has various components within itself, which we can find by their IDs.

To find the components grouped by their types, drop this expression into the browser's JavaScript debug console (we're using Chrome here):

model.types;

The result is the value of the Model's types map, which contains its components, mapped to their types:

Here we've expanded the PhongMaterial components, and we can see our PhongMaterial.

Let's get that PhongMaterial from our Model's components map and change its diffuse color:

var material = model.components["myMaterial"];
material.diffuse = [0.9, 0.4, 0.4];

The Model also has an entities map, in which we can find our Entity:

Transforming a Model

A Model lets us transform its Entities as a group.

We can attach a modeling Transform to our Model, as a either a configuration object or a component instance:

// Attach transforms as a configuration object:
model.transform = {
       type: "xeogl.Translate",
       xyz: [-35, 0, 0],
       parent: {
           type: "xeogl.Rotate",
           xyz: [0, 1, 0],
           angle: 45
       }
    };

// Attach our own transform instances:
model.transform = new xeogl.Translate({
       xyz: [-35, 0, 0],
       parent: new xeogl.Rotate({
           xyz: [0, 1, 0],
           angle: 45
       })
    });

We can also provide the Transform to the Model constructor, as either configuration objects or instances.

Here we'll provide them as configuration objects:

// Model internally instantiates our transform components:
var model3 = new xeogl.Model({
       transform: {
           type: "xeogl.Translate",
           xyz: [-35, 0, 0],
           parent: {
               type: "xeogl.Rotate",
               xyz: [0, 1, 0],
               angle: 45
           }
       }
    });

Note that, as with the components we added before, the Model will manage the lifecycles of our Transform components, destroying them when we destroy the Model or call its destroyAll method. Also, when we call destroy on a Model component, the component will remove itself from the Model first.

Getting the World-space boundary of a Model

Get the World-space axis-aligned boundary of a MOdel like this:

model.on("boundary", function() {
   var aabb = model.aabb; //  [xmin, ymin,zmin,xmax,ymax, zmax]
   //...
});

We can also subscribe to changes to that boundary, which will happen whenever

  • the Model's Transform is updated,
  • components are added or removed from the Model, or
  • the Geometries or Transforms of its Entities are switched or modified.
model.on("boundary", function() {
   var aabb = model.aabb; // [xmin, ymin,zmin,xmax,ymax, zmax]
});

Clearing a Model

model.clear();

Destroying a Model

model.destroy();

Constructor

Model

(
  • [scene]
  • [cfg]
  • [flattenTransforms=true]
  • [ghost=false]
  • [highlight=false]
  • [outline=false]
)

Parameters:

  • [scene] Scene optional

    Parent Scene - creates this ModelModel in the default Scene when omitted.

  • [cfg] optional

    Configs

    • [id] String optional

      Optional ID, unique among all components in the parent Scene, generated automatically when omitted.

    • [meta] String:Object optional

      Optional map of user-defined metadata to attach to this ModelModel.

    • [transform] Number | String | Transform optional

      A Local-to-World-space (modelling) Transform to attach to this Model. Must be within the same Scene as this Model. Internally, the given Transform will be inserted above each top-most Transform that the Model attaches to its Entities.

    • [components] Array optional

      Array of Components to add initially, given as IDs, configuration objects or instances.

  • [flattenTransforms=true] Boolean optional

    Flattens transform hierarchies to improve rendering performance.

  • [ghost=false] Boolean optional

    When true, sets all the Model's Entities initially ghosted. |

  • [highlight=false] Boolean optional

    When true, sets all the Model's Entities initially highlighted. |

  • [outline=false] Boolean optional

    When true, sets all the Model's Entities initially outlined. |

Methods

add

(
  • component
)

Adds a Component or subtype to this Model.

The Component(s) may be specified by ID, instance, JSON definition or type.

See class comment for usage examples.

The Components must be in the same Scene as this Model.

Fires an added event.

Parameters:

  • component Number | String | | Component

    ID, definition or instance of a Component type or subtype.

create

(
  • [cfg]
)

Convenience method for creating a Component within this Component's Scene.

The method is given a component configuration, like so:

var material = myComponent.create({
     type: "xeogl.PhongMaterial",
     diffuse: [1,0,0],
     specular: [1,1,0]
}, "myMaterial");

Parameters:

  • [cfg] optional

    Configuration for the component instance.

Returns:

:

destroy

()

Destroys this component.

Fires a destroyed event on this Component.

Automatically disassociates this component from other components, causing them to fall back on any defaults that this component overrode on them.

TODO: describe effect with respect to #create

destroyAll

()

Destroys all Components in this Model.

error

(
  • message
)

Logs an error for this component to the JavaScript console.

The console message will have this format: [ERROR] [<component type> =<component id>: <message>

Also fires the message as an error event on the parent Scene.

Parameters:

  • message String

    The message to log

fire

(
  • event
  • value
  • [forget=false]
)

Fires an event on this component.

Notifies existing subscribers to the event, optionally retains the event to give to any subsequent notifications on the event as they are made.

Parameters:

  • event String

    The event type name

  • value Object

    The event parameters

  • [forget=false] Boolean optional

    When true, does not retain for subsequent subscribers

hasSubs

(
  • event
)
Boolean

Returns true if there are any subscribers to the given event on this component.

Parameters:

  • event String

    The event

Returns:

Boolean:

True if there are any subscribers to the given event on this component.

isType

(
  • type
)
Boolean

Tests if this component is of the given type, or is a subclass of the given type.

The type may be given as either a string or a component constructor.

This method works by walking up the inheritance type chain, which this component provides in property superTypes, returning true as soon as one of the type strings in the chain matches the given type, of false if none match.

Examples:

var myRotate = new xeogl.Rotate({ ... });

myRotate.isType(xeogl.Component); // Returns true for all xeogl components
myRotate.isType("xeogl.Component"); // Returns true for all xeogl components
myRotate.isType(xeogl.Rotate); // Returns true
myRotate.isType(xeogl.Transform); // Returns true
myRotate.isType("xeogl.Transform"); // Returns true
myRotate.isType(xeogl.Entity); // Returns false, because xeogl.Rotate does not (even indirectly) extend xeogl.Entity

Parameters:

  • type String | Function

    Component type to compare with, eg "xeogl.PhongMaterial", or a xeogl component constructor.

Returns:

Boolean:

True if this component is of given type or is subclass of the given type.

iterate

(
  • callback
  • [scope=this]
)

Iterates with a callback over the Components in this Model.

Parameters:

  • callback Function

    Callback called for each Component.

  • [scope=this] Object optional

    Optional scope for the callback, defaults to this Model.

log

(
  • message
)

Logs a console debugging message for this component.

The console message will have this format: [LOG] [<component type> <component id>: <message>

Also fires the message as a log event on the parent Scene.

Parameters:

  • message String

    The message to log

off

(
  • handle
)

Cancels an event subscription that was previously made with on or once.

Parameters:

  • handle String

    Publication handle

on

(
  • event
  • callback
  • [scope=this]
)
String

Subscribes to an event on this component.

The callback is be called with this component as scope.

Parameters:

  • event String

    The event

  • callback Function

    Called fired on the event

  • [scope=this] Object optional

    Scope for the callback

Returns:

String:

Handle to the subscription, which may be used to unsubscribe with {@link #off}.

once

(
  • event
  • callback
  • [scope=this]
)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is handled.

This is equivalent to calling on, and then calling off inside the callback function.

Parameters:

  • event String

    Data event to listen to

  • callback Function(data)

    Called when fresh data is available at the event

  • [scope=this] Object optional

    Scope for the callback

removeAll

()

Removes all Components from this Model.

warn

(
  • message
)

Logs a warning for this component to the JavaScript console.

The console message will have this format: [WARN] [<component type> =<component id>: <message>

Also fires the message as a warn event on the parent Scene.

Parameters:

  • message String

    The message to log

Properties

aabb

Float32Array final

World-space axis-aligned 3D boundary (AABB) of this Model.

The AABB is represented by a six-element Float32Array containing the min/max extents of the axis-aligned volume, ie. [xmin, ymin,zmin,xmax,ymax, zmax].

components

String:Component

The Components within this Model, mapped to their IDs.

Fires an Model/updated:event event on change.

destroyed

Boolean

True as soon as this Component has been destroyed

entities

String:Entity

The Entity component instances within this Model, mapped to their IDs.

ghost

Boolean

Flag which indicates if this Model's Entities are rendered with ghost effect.

Default: false

highlight

Boolean

Flag which indicates if this Model's Entities are rendered with highlight effect.

Default: false

id

String final

Unique ID for this Component within its parent Scene.

isDefault

Boolean

Indicates whether this is one of the Scene's built-in Components.

metadata

Object

Arbitrary, user-defined metadata on this component.

numComponents

Number

The number of Components within this Model.

outline

Boolean

Flag which indicates if this Model's Entities are rendered with outline effect.

Default: false

scene

Scene final

The parent Scene that contains this Component.

superTypes

Array of String final

An array of strings that indicates the chain of super-types within this component's inheritance hierarchy.

For example, if this component is a Rotate, which extends Transform, which in turn extends Component, then this property will have the value:

["xeogl.Component", "xeogl.Transform"]
                    

Note that the chain is ordered downwards in the hierarchy, ie. from super-class down towards sub-class.

transform

Transform

The Local-to-World-space (modelling) Transform attached to this Model.

Must be within the same Scene as this Model.

Internally, the given Transform will be inserted above each top-most Transform that the Model attaches to its Entities.

Fires an transform event on change.

type

String final

Inherited from Component but overwritten in src/models/model.js:259

JavaScript class name for this Component.

types

String:{String:xeogl.Component}

A map of maps; for each Component type in this Model, a map to IDs to Component instances, eg.

"xeogl.Geometry": {
                      "alpha": <xeogl.Geometry>,
                      "beta": <xeogl.Geometry>
                    },
                    "xeogl.Rotate": {
                      "charlie": <xeogl.Rotate>,
                      "delta": <xeogl.Rotate>,
                      "echo": <xeogl.Rotate>,
                    },
                    //...
                    

visible

Boolean

Indicates whether this Model's Entities are visible or not.

Default: true

Events

added

Fired whenever an individual Component is added to this Model.

Event Payload:

boundary

Fired whenever this Model's World-space boundary changes.

Get the latest boundary from the Model's aabb property.

destroyed

Fired when this Component is destroyed.

removed

Fired whenever an individual Component is removed from this Model.

Event Payload:

transform

Fired whenever this Model's transform property changes.

Event Payload:

  • value Object

    The property's new value