API Docs for: 1.0.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 World-space boundary of its components in an automatically updating Boundary3D.

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 its destroyAll method.

var model = new xeogl.Model();

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");

Since xeogl aims to be as declarative as possible, we can also add components all in one shot, via the Model's constructor:

model = new xeogl.Model({
   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 components

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

As well as allowing us organize the lifecycle of groups of components, a Model also lets us transform them 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

A Model's worldBoundary property is a Boundary3D that provides the collective World-space boundary of all its components. The Boundary3D will automatically adjust its extents whenever we add or remove components to its Model, or whenever we update the Model's Transforms.

Let's get the Boundary3D from our first Model, subscribe to changes on its extents, then animate one of the Model's Transforms, which will cause the Boundary3D to fire an updated event each time its extents change:

var worldBoundary = model.worldBoundary;

worldBoundary.on("updated", function() {

       // See docs on xeogl.Boundary3D for
       // the format of these properties

       obb = worldBoundary.obb;
       aabb = worldBoundary.aabb;
       center = worldBoundary.center;
       //...
   });

model.scene.on("tick", function() {
       model.transform.parent.angle += 0.2;
   });

Since xeogl is all about lazy-execution to avoid needless work, the Boundary3D will only actually recompute its extents the first time we read its obb, aabb, center or center properties after it fired its last updated event.

Also, the Model lazy-instantiates its Boundary3D the first time we reference the Model's worldBoundary property. Since the Boundary3D is going to hang around in memory and fire updated events each time we add or remove components, or animate Transforms, for efficiency we should destroy the Boundary3D as soon as we no longer need it.

Finally, when we destroy a Model, it will also destroy its Boundary3D, if it currently has one.

Constructor

Model

(
  • [scene]
  • [cfg]
)

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.

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.

canvasPosToLocalRay

(
  • camera
  • entity
  • canvasPos
  • localRayOrigin
  • localRayDir
)
static

Provided by the xeogl module.

Defined in src/math/mathRays.js:73

Transforms a Canvas-space position to an Entity's Local-space coordinate system, in the context of a Camera.

Parameters:

  • camera Camera

    The Camera.

  • entity Entity

    The Entity.

  • canvasPos Float32Array

    The Canvas-space position.

  • localRayOrigin Float32Array

    The Local-space ray origin.

  • localRayDir Float32Array

    The Local-space ray direction.

canvasPosToWorldRay

(
  • camera
  • canvasPos
  • worldRayOrigin
  • worldRayDir
)
static

Provided by the xeogl module.

Defined in src/math/mathRays.js:10

Transforms a Canvas-space position into a World-space ray, in the context of a Camera.

Parameters:

  • camera Camera

    The Camera.

  • canvasPos Float32Array

    The Canvas-space position.

  • worldRayOrigin Float32Array

    The World-space ray origin.

  • worldRayDir Float32Array

    The World-space ray direction.

create

(
  • [cfg]
  • [instanceId]
)

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

You would typically use this method to conveniently instantiate components that you'd want to share (ie. "instance") among your Entities.

The method is given a component type, configuration and optional instance ID, like so:

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

The first time you call this method for the given type and instanceId, this method will create the PhongMaterial, passing the given attributes to the component's constructor.

If you call this method again, specifying the same type and instanceId, the method will return the same component instance that it returned the first time, and will ignore the new configuration:

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

So in this example, our PhongMaterial will continue to have the red specular and diffuse color that we specified the first time.

Each time you call this method with the same type and instanceId, the Scene will internally increment a reference count for the component instance.

Parameters:

  • [cfg] optional

    Configuration for the component instance - only used if this is the first time you are getting the component, ignored when reusing an existing instance.

  • [instanceId] String | Number optional

    Identifies the shared component instance. Note that this is not used as the ID of the component - you can specify the component ID in the cfg parameter.

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

worldRayToLocalRay

(
  • entity
  • worldRayOrigin
  • worldRayDir
  • localRayOrigin
  • localRayDir
)
static

Provided by the xeogl module.

Defined in src/math/mathRays.js:94

Transforms a ray from World-space to an Entity's Local-space coordinate system.

Parameters:

  • entity Entity

    The Entity.

  • worldRayOrigin Float32Array

    The World-space ray origin.

  • worldRayDir Float32Array

    The World-space ray direction.

  • localRayOrigin Float32Array

    The Local-space ray origin.

  • localRayDir Float32Array

    The Local-space ray direction.

Properties

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.

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.

json

JSON final

JSON object containing the state of this Component.

metadata

Object

Arbitrary, user-defined metadata on this component.

numComponents

Number

The number of Components within this Model.

scene

Scene final

The parent Scene that contains this Component.

string

String final

Inherited from Component but overwritten in src/component.js:1065

String containing the serialized JSON state of 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:245

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>,
                    },
                    //...
                    

worldBoundary

Boundary3D final

World-space 3D boundary enclosing all the components in this Model.

If you call destroy on this boundary, then this property will be assigned to a fresh Boundary3D instance next time you reference it.

Events

added

Fired whenever an individual Component is added to this Model.

Event Payload:

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