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, Mesh, buildTorusGeometry, ReadableGeometry, PhongMaterial, Texture, Fresnel} from "xeokit-sdk.es.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"];

Restriction on IDs

Auto-generated IDs are of the form "__0", "__1", "__2" ... and so on.

Scene maintains a map of these IDs, along with a counter that it increments each time it generates a new ID.

If Scene has created the IDs listed above, and we then destroy the Component with ID "__1", Scene will mark that ID as available, and will reuse it for the next default ID.

Therefore, two restrictions your on IDs:

• don't use IDs that begin with two underscores, and
• don't reuse auto-generated IDs of destroyed Components.

Logging

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

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