IComponent | Matterport SDK
Usage of the SDK constitutes your agreement with the Matterport SDK Agreement. Email developers@matterport.com with any questions.

IComponent

Use this interface to implement a component and register it with the sdk.

function Box() {
   this.inputs = {
     visible: false,
   };

   this.onInit = function() {
     var THREE = this.context.three;
     var geometry = new THREE.BoxGeometry(1, 1, 1);
     this.material = new THREE.MeshBasicMaterial();
     var mesh = new THREE.Mesh( geometry, this.material );
     this.outputs.objectRoot = mesh;
   };

   this.onEvent = function(type, data) {
   }

   this.onInputsUpdated = function(previous) {
   };

   this.onTick = function(tickDelta) {
   }

   this.onDestroy = function() {
     this.material.dispose();
   };
}

function BoxFactory() {
   return new Box();
}

// Registering the component with the sdk
sdk.Scene.register('box', BoxFactory);

Hierarchy

  • IComponent

Index

Properties

Methods

Properties

Readonly componentType

componentType: string

The component type. This value is the same string used to identify the component factory.

context

context: Scene.IComponentContext

The context provides access to the underlying rendering engine. The sdk framework adds it to the component during construction.

Optional emits

emits: Record<string, boolean>

An optional dictionary of events emitted by this component. Setting an emit to a falsy value will prevent the component from emitting the event when using .notify. These properties can be changed by an external source at any time. If this dictionary is omitted, any and all events will be emitted from .notify.

events

events: Record<string, boolean>

An optional dictionary of events that this component handles through its onEvent. Setting an event to a falsy value temporarily stops this component from receiving said event.

Optional inputs

inputs: Record<string, unknown>

An optional dictionary of properties that affects the behavior of the component. These properties can be changed by an external source at any time. It is up to the component to respond appropriately to the changes. These input properties can also be bind targets to an observable source e.g. the output property of another component.

outputs

outputs: Record<string, unknown> & Scene.PredefinedOutputs

An optional dictionary of properties that this component computes. This dictionary is observable and can be the source of a bind target.

objectRoot and collider are reserved properties which are added to all components automatically. The value set to objectRoot will get added to the scene graph as a child of the scene node. The value set to collider will get included in raycast hit detection.

function Box() {
   this.onInit = function() {
     var THREE = this.context.three;
     var geometry = new THREE.BoxGeometry(1, 1, 1);
     this.material = new THREE.MeshBasicMaterial();
     var mesh = new THREE.Mesh( geometry, this.material );

     this.outputs.objectRoot = mesh;   // gets added to the scene node
     this.outputs.collider = mesh;     // will now be part of raycast testing
   }
}

Methods

bind

  • deprecated

    Use IObject.bindPath instead.

    Call this function to bind an input property to an output property on another component.

    const [sceneObject] = await sdk.Scene.createObjects(1);
const node1 = sceneObject.createNode();
const node2 = sceneObject.createNode();

// mp.objLoader has an outputs.visible property
const comp1 = node1.addComponent('mp.objLoader');

// myComponent has an inputs.toggleState property
const comp2 = node2.addComponent('myComponent');

comp1.bind('visible', comp2, 'toggleState');

node1.start();
node2.start();

// comp1.inputs.visible will now always equal comp2.outputs.toggleState
});

    Parameters

    • prop: string

      inputs property name

    • src: Scene.IComponent

      source component

    • srcProp: string

      source outputs property name

    Returns void

bindEvent

  • bindEvent(eventType: string, src: Scene.IComponent, srcEventType: string): void
  • deprecated

    Use IObject.bindPath instead.

    Notifies this component of an eventType when the src Component calls notify with a srcEventType event

    Parameters

    Returns void

notify

  • notify(eventType: string, eventData?: unknown): void

  • Emit an event to other components

    Parameters

    • eventType: string
    • Optional eventData: unknown

    Returns void

Optional onDestroy

  • onDestroy(): void

  • This function is called once right before the scene node has stopped.

    Returns void

Optional onEvent

  • This function is called once for each interaction or event that occurred during the last frame. The component must set outputs.collider with an Object3D to get interaction callbacks or bindEvent to receive other events.

    Parameters

    Returns void

Optional onInit

  • onInit(): void

  • This function is called once after the scene node its attached to has started.

    Returns void

Optional onInputsUpdated

  • onInputsUpdated(previousInputs: Record<string, unknown>): void

  • This function is called after one or more input properties have changed. It will be called at most once a frame.

    Parameters

    • previousInputs: Record<string, unknown>

    Returns void

Optional onTick

  • onTick(tickDelta: number): void

  • This function is called once a frame after input changes have been detected.

    Parameters

    • tickDelta: number

    Returns void

spyOnEvent