Reference Source
public class | source

Component

Base class for all xeokit components.

Component IDs

Every Component has an ID that's unique within the parent Scene. xeokit generates the IDs automatically by default, however you can also specify them yourself. In the example below, we're creating a scene comprised of Scene, Material, ReadableGeometry and Mesh components, while letting xeokit generate its own ID for the ReadableGeometry:

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildTorusGeometry} from "../src/scene/geometry/builders/buildTorusGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.js";
import {Fresnel} from "../src/scene/materials/Fresnel.js";

const viewer = new Viewer({
       canvasId: "myCanvas"
   });

viewer.scene.camera.eye = [0, 0, 5];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({
         center: [0, 0, 0],
         radius: 1.5,
         tube: 0.5,
         radialSegments: 32,
         tubeSegments: 24,
         arc: Math.PI * 2.0
     }),
     material: new PhongMaterial(viewer.scene, {
         id: "myMaterial",
         ambient: [0.9, 0.3, 0.9],
         shininess: 30,
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse/uvGrid2.jpg"
         }),
         specularFresnel: new Fresnel(viewer.scene, {
             leftColor: [1.0, 1.0, 1.0],
             rightColor: [0.0, 0.0, 0.0],
             power: 4
         })
    })
});

We can then find those components like this:

// Find the Material var material = viewer.scene.components["myMaterial"];

// Find all PhongMaterials in the Scene var phongMaterials = viewer.scene.types["PhongMaterial"];

// Find our Material within the PhongMaterials var materialAgain = phongMaterials["myMaterial"];


## Logging

Components have methods to log ID-prefixed messages to the JavaScript console:

````javascript
material.log("Everything is fine, situation normal.");
material.warn("Wait, whats that red light?");
material.error("Aw, snap!");

The logged messages will look like this in the console:

[LOG]   myMaterial: Everything is fine, situation normal.
[WARN]  myMaterial: Wait, whats that red light..
[ERROR] myMaterial: Aw, snap!

Destruction

Get notification of destruction of Components:

material.once("destroyed", function() {
    this.log("Component was destroyed: " + this.id);
});

Or get notification of destruction of any Component within its Scene:

scene.on("componentDestroyed", function(component) {
    this.log("Component was destroyed: " + component.id);
});

Then destroy a component like this:

material.destroy();

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

True as soon as this Component has been destroyed

public

ID of this Component, unique within the Scene.

public

meta: *

Arbitrary, user-defined metadata on this component.

public get

The Component that owns the lifecycle of this Component, if any.

public

The parent Scene that contains this Component.

public

The viewer that contains this Scene.

Method Summary

Public Methods
public

clear()

Destroys all Components that are owned by this.

public

Destroys this component.

public

error(message: String)

Logs an error for this component to the JavaScript console.

public

fire(event: String, value: Object, forget: Boolean)

Fires an event on this component.

public

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

public

isType(type: *): *: Boolean

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

public

log(message: String)

Logs a console debugging message for this component.

public

off(subId: String)

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

public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this component.

public

once(event: String, callback: Function, scope: Object)

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

public

warn(message: String)

Logs a warning for this component to the JavaScript console.

Public Constructors

public constructor() source

Public Members

public destroyed: Boolean source

True as soon as this Component has been destroyed

Properties:

NameTypeAttributeDescription
destroyed *

public id: String | Number source

ID of this Component, unique within the Scene.

Components are mapped by this ID in Scene#components.

Properties:

NameTypeAttributeDescription
id *

public meta: * source

Arbitrary, user-defined metadata on this component.

Properties:

NameTypeAttributeDescription
metadata *

public get owner: Component source

The Component that owns the lifecycle of this Component, if any.

When that component is destroyed, this component will be automatically destroyed also.

Will be null if this Component has no owner.

Properties:

NameTypeAttributeDescription
owner *

public scene: Scene source

The parent Scene that contains this Component.

Properties:

NameTypeAttributeDescription
scene *

public viewer: Viewer source

The viewer that contains this Scene.

Properties:

NameTypeAttributeDescription
viewer *

Public Methods

public clear() source

Destroys all Components that are owned by this. These are Components that were instantiated with this Component as their first constructor argument.

public destroy() source

Destroys this component.

public error(message: String) source

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.

Params:

NameTypeAttributeDescription
message String

The message to log

public fire(event: String, value: Object, forget: Boolean) source

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.

Params:

NameTypeAttributeDescription
event String

The event type name

value Object

The event parameters

forget Boolean
  • optional
  • default: false

When true, does not retain for subsequent subscribers

public hasSubs(event: String): Boolean source

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

Params:

NameTypeAttributeDescription
event String

The event

Return:

Boolean

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

public isType(type: *): *: Boolean source

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

Params:

NameTypeAttributeDescription
type *

Return:

*

public log(message: String) source

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.

Params:

NameTypeAttributeDescription
message String

The message to log

public off(subId: String) source

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

Params:

NameTypeAttributeDescription
subId String

Subscription ID

public on(event: String, callback: Function, scope: Object): String source

Subscribes to an event on this component.

The callback is be called with this component as scope.

Params:

NameTypeAttributeDescription
event String

The event

callback Function

Called fired on the event

scope Object
  • optional
  • default: this

Scope for the callback

Return:

String

Handle to the subscription, which may be used to unsubscribe with #off.

public once(event: String, callback: Function, scope: Object) source

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

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

Params:

NameTypeAttributeDescription
event String

Data event to listen to

callback Function

Called when fresh data is available at the event

scope Object
  • optional
  • default: this

Scope for the callback

public warn(message: String) source

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.

Params:

NameTypeAttributeDescription
message String

The message to log