API Docs for: 2.0.0
Show:

BIMSURFER Module

Component is the base class for all components within a Viewer.


Contents


Component IDs

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

``
## <a name="componentProps">Properties</a>
Almost every property in a Viewer Component fires a change event when you update it. For example, we can subscribe
 to the Material/diffuse:event event that a
 Material fires when its Material/diffuse:property
 property is updated, like so:
``javascript
 // Bind a change callback to a property
 var handle = material.on("diffuse", function(diffuse) {
    console.log("Material diffuse color has changed to: [" + diffuse[0] + ", " + diffuse[1] + "," + diffuse[2] + "]");
});
// Change the property value, which fires the callback
 material.diffuse = [ 0.0, 0.5, 0.5 ];
// Unsubscribe from the property change event
 material.off(handle);

We can also subscribe to changes in the way components are attached to each other, since components are properties of other components. For example, we can subscribe to the 'GameObject/material:event' event that a GameObject fires when its GameObject/material:property property is set to a different Material:

 // Bind a change callback to the GameObject's Material
 object1.on("material", function(material) {
    console.log("GameObject's Material has changed to: " + material.id);
});
// Now replace that Material with another
 object1.material = new BIMSURFER.Material({
    id: "myOtherMaterial",
    diffuse: [ 0.3, 0.3, 0.6 ]
    //..
});

Metadata

You can set optional metadata on your Components, which can be anything you like. These are intended to help manage your components within your application code or content pipeline. You could use metadata to attach authoring or version information, like this:

 // Viewer with authoring metadata
 var viewer = new BIMSURFER.Viewer({
    id: "myViewer",
    metadata: {
        title: "My awesome 3D viewer",
        author: "@xeolabs",
 date: "February 13 2015"
 }
 });
// Material with descriptive metadata
 var material = new BIMSURFER.Material(viewer, {
    id: "myMaterial",
    diffuse: [1, 0, 0],
    metadata: {
        description: "Bright red color with no textures",
        version: "0.1",
        foo: "bar"
    }
});

As with all properties, you can subscribe and change the metadata like this:

 // Subscribe to changes to the Material's metadata
 material.on("metadata", function(value) {
    console.log("Metadata changed: " + JSON.stringify(value));
});
// Change the Material's metadata, firing our change handler
 material.metadata = {
    description: "Bright red color with no textures",
    version: "0.2",
    foo: "baz"
};

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 directly on the Components:

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

Or get notification of destruction of any Component within its Viewer, indiscriminately:

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

Then destroy a component like this:

 material.destroy();

Other Components that are linked to it will fall back on a default of some sort. For example, any GameObject that were linked to our Material will then automatically link to the Viewer's default Viewer/material:property.

This module is a rollup of the following modules:

  • animation
    Animation components.
  • camera
    Camera components.
  • canvas
    Core viewer components.
  • configs
    Viewer configuration management.
  • effect
    A **DesaturateEffect** is an {{#crossLink "Effect"}}{{/crossLink}} that desaturates the colours of {{#crossLink "Object"}}Objects{{/crossLink}} within an {{#crossLink "ObjectSet"}}{{/crossLink}}. ## Overview TODO ## Example #### Desaturating an ObjectSet In this example we create four {{#crossLink "Object"}}Objects{{/crossLink}}, then add two of them to an {{#crossLink "ObjectSet"}}{{/crossLink}}.
    Then we apply a {{#crossLink "DesaturateEffect"}}{{/crossLink}} to the {{#crossLink "ObjectSet"}}{{/crossLink}}, causing the colour of it's {{#crossLink "Object"}}Objects{{/crossLink}} to become desaturated while the other two {{#crossLink "Object"}}Objects{{/crossLink}} remain normal. ``javascript // Create a Viewer var viewer = new BIMSURFER.Viewer({ element: "myDiv" }); // Create a Camera var camera = new BIMSURFER.Camera(viewer, { eye: [30, 20, -30] }); // Spin the camera viewer.on("tick", function () { camera.rotateEyeY(0.2); }); // Create a CameraControl so we can move the Camera var cameraControl = new BIMSURFER.CameraControl(viewer, { camera: camera }); // Create an AmbientLight var ambientLight = new BIMSURFER.AmbientLight(viewer, { color: [0.7, 0.7, 0.7] }); // Create a DirLight var dirLight1 = new BIMSURFER.DirLight(viewer, { color: [0.6, 0.9, 0.9], dir: [1.0, 0.0, 0.0], space: "view" }); // Create a DirLight var dirLight2 = new BIMSURFER.DirLight(viewer, { color: [0.6, 0.9, 0.9], dir: [-0.5, 0.0, -1.0], space: "view" }); // Create a BoxGeometry var geometry = new BIMSURFER.BoxGeometry(viewer, { id: "myGeometry" }); // Create some Objects // Share the BoxGeometry among them var object1 = new BIMSURFER.Object(viewer, { type: "IfcRoof", geometries: [ geometry ], matrix: BIMSURFER.math.translationMat4v([-8, 0, -8]) }); var object2 = new BIMSURFER.Object(viewer, { type: "IfcDistributionFlowElement", geometries: [ geometry ], matrix: BIMSURFER.math.translationMat4v([8, 0, -8]) }); var object3 = new BIMSURFER.Object(viewer, { type: "IfcRailing", geometries: [ geometry ], matrix: BIMSURFER.math.translationMat4v([-8, 0, 8]) }); var object4 = new BIMSURFER.Object(viewer, { type: "IfcRoof", geometries: [ geometry ], matrix: BIMSURFER.math.translationMat4v([8, 0, 8]) }); // Create an ObjectSet that initially contains one of our Objects var objectSet = new BIMSURFER.ObjectSet(viewer, { objects: [object1 ] }); // Apply a Desaturate effect to the ObjectSet, which causes the // Object in the ObjectSet to become desaturated. var desaturate = new BIMSURFER.DesaturateEffect(viewer, { objectSet: objectSet }); // Add a second Object to the ObjectSet, causing the Desaturate to now render // that Object as desaturated also objectSet.addObjects([object3]); ``
  • effects
    Rendering effects components.
  • geometry
    Geometry components.
  • input
    Components for handling user interaction.
  • labelling
    A **Position** is a spatial location within a {{#crossLink "Viewer"}}{{/crossLink}}. ## Overview A Position provides its coordinates in each of BIMSurfer's five coordinate systems:
    • {{#crossLink "Position/pos:property"}}{{/crossLink}} - 3D coordinates within the Position's local Model coordinate system.
    • {{#crossLink "Position/worldPos:property"}}{{/crossLink}} - 3D coordinates within the Viewer's current World coordinate system, after transformation by the {{#crossLink "Position/matrix:property"}}Position's modelling matrix{{/crossLink}}.
    • {{#crossLink "Position/viewPos:property"}}{{/crossLink}} - 3D coordinates within the Viewer's current View coordinate system, after transformation by the {{#crossLink "Viewer/viewMatrix:property"}}Viewer's view matrix{{/crossLink}}.
    • {{#crossLink "Position/projPos:property"}}{{/crossLink}} - 3D coordinates within the Viewer's current Projection coordinate system, after transformation by the {{#crossLink "Viewer/projMatrix:property"}}Viewer's projection matrix{{/crossLink}}.
    • {{#crossLink "Position/canvasPos:property"}}{{/crossLink}} - 2D coordinates within the Viewer's current Canvas coordinate system.
    ## Example ``Javascript // Create a Viewer var viewer = new BIMSURFER.Viewer({ element: "myDiv" }); // Create a Camera var camera = new BIMSURFER.Camera(viewer, { eye: [20, 20, -20] }); // Create a CameraControl to interact with the Camera var cameraControl = new BIMSURFER.CameraControl(viewer, { camera: camera }); // Create a Position new BIMSURFER.Position(viewer, { pos: [0,0,0], matrix: BIMSURFER.math.translationMat4v([4, 0,0]) }); ``
  • lighting
    Light source objects.
  • loading
    Components for loading content.
  • math
    Math utilities.
  • objects
    Viewer objects and utilities.
  • reporting
    Components for reporting viewer activity and statistics.