Architecture

// Create a scene object. `createObjects` can create multiple objects and returns an array with that number of objects
const [sceneObject] = await sdk.Scene.createObjects(1);
// Starts all nodes referenced by this scene object
sceneObject.start()
// Stops all nodes referenced by this scene object. The scene object cannot be restarted after this function has been called
sceneObject.stop()

// Create a scene object. `createObjects` can create multiple objects and returns an array with that number of objects
const [sceneObject] = await sdk.Scene.createObjects(1)

// Create a scene node with an optional unique id
const node = sceneObject.addNode('my-node')

// Transitions the node to Operating if it is in the Initializing state. Calling this function has no effect if the node is already Operating
node.start()

// Transitions the node to Destroyed state if it is in any state. Calling this function has no effect if the node is already Destroyed
node.stop()

// Create a scene object. `createObjects` can create multiple objects and returns an array with that number of objects
const [sceneObject] = await sdk.Scene.createObjects(1)

// Create a scene node with an optional unique id
const node = sceneObject.addNode('my-node')

// Adding a component to 'my-node' with optional initialInputs and option id
const initialInputs = {
  url: 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/models/fbx/stanford-bunny.fbx',
}
const component = node.addComponent('mp.fbxLoader', initialInputs, "my-component")

// Start 'my-node'
node.start()


// Destroying a scene node
node.stop()

function Sum() {
  this.inputs = {
    augend: 0,
    addend: 0,
  };

  this.outputs = {
    sum: 0,
  };

  // if any input changes, recompute the sum.
  this.onInputsUpdated = function() {
    this.outputs.sum = this.inputs.augend + this.inputs.addend;
  };
}

class Renderable {
  onInit() {
    const THREE = this.context.three;
    this.outputs.objectRoot = new THREE.Mesh(
      new THREE.BoxBufferGeometry( 1, 1, 1 ),
      new THREE.MeshBasicMaterial( { color: 0xffff00 } ));
  }
}

class Clickable {
  events = {
    // subscribe to click events
    [ComponentInteractionType.CLICK]: true,
  }

  emits = {
    // emit a clicked events
    clicked: true,

  };

  onInit() {
    var THREE = this.context.three;
    this.outputs.collider = new THREE.Mesh();
  }

  onEvent(eventType: string) {
    if (this.eventType === ComponentInteractionType.CLICK) {
      console.log('Clickable component was clicked!');
      // cancel the click event subscription, this component will no longer receive clicks
      this.events[ComponentInteractionType.CLICK] = false;

      // tell other components that this component was clicked
      this.notify('clicked', { /* an optional payload */});

      // disable the 'clicked' emit
      this.emits.clicked = false;
      // this will NOT notify other components since `emits.clicked` was set to `false`
      this.notify('clicked');
    }
  }
}

interface InputPath<T> {
  get(): T;
  set(newVal: T): void;
}

interface OutputPath<T> {
  get(): T;
}

// Create a scene object, node, and component
const [sceneObject] = await sdk.Scene.createObjects(1);
const node = sceneObject.addNode();
const component = node.addComponent('sum');

// create and add a path that references the component's output
const sumOutputPath = sceneObject.addOutputPath(component, 'sum');

// assume Sum() class from Inputs and Outputs Dictionaries section
const [sceneObject] = await sdk.Scene.createObjects(1);
var node = await sceneObject.addNode();
var comp1 = node.addComponent('sum');
var comp2 = node.addComponent('sum');
var comp3 = node.addComponent('sum');

// create a path to comp1.inputs.augend
const comp1Augend = sceneObject.addInputPath(comp1, 'augend');
// create a path to comp1.inputs.addend
const comp1Addend = sceneObject.addInputPath(comp1, 'addend')
// create a path to comp2.outputs.sum
const comp2Sum = sceneObject.addOutputPath(comp2, 'sum');
// create a path to comp3.outputs.sum
const comp3Sum = sceneObject.addInputPath(comp3, 'sum');

// bind the the output (sum) of comp2 to the input (augend) of comp1
comp1Augend.bind(comp2Sum);
// bind the the output (sum) of comp3 to the input (addend) of comp1
comp1Addend.bind(comp3Sum);

node.start();

// start modifying comp2's and comp3's inputs to automatically modify comp1's sum
comp2.inputs.augend = 5;
console.log(comp1.outputs.sum);
// output: 5

comp3.inputs.addend = 6;
console.log(comp1.outputs.sum);
// output: 11

class Clickable {
  emits = {
    clicked: true,
  };
  // ...
  onEvent(eventType: string) {
    this.notify('clicked');
  }
}

class Random {
  events = {
    randomize: true
  }

  outputs = {
    num: 0
  }

  onEvent(eventType: string) {
    if (eventType === 'randomize') {
      this.outputs.num = Math.random();
    }
  }
}

// assume the previous two components have been registered
const [sceneObject] = await sdk.Scene.createObjects(1);
const node = sceneObject.createNode();
const clickable = node.addComponent('clickable');
const random = node.addComponent('random');

// bind Random's 'randomize' event to Clickable's 'clicked' event
const emitPath = sceneObject.addEmitPath(clickable, 'clicked');
const eventPath = sceneObject.addEventPath(random, 'randomize');

sceneObject.bindPath(eventPath, emitPath);

// from now on when `clickable` is clicked, `random` updates its `output.num` value

// assume Clickable class from "Event Subscriptions" section
const [sceneObject] = await sdk.Scene.createObjects(1);
const node = sceneObject.addNode();
const clickComponent = node.addComponent('clickable');

const clickPath = sceneObject.addEmitPath(clickComponent, 'clicked');
class ClickSpy implements MpSdk.Scene.ISceneObjectSpy<Intersect> {
  readonly path = clickPath;
  onEvent(type, data) {
    console.log('spied a notify. Event type:', type, 'w/ data', data);
  }
}

// attach spies
const clickSubscription = sceneObject.spyOnEvent(new ClickSpy());

node.start();

// from here, any time the Clickable component calls `notify('clicked')`, `ClickSpy.onEvent` will be called

// stop spying on the click events
clickSubscription.cancel();

// assume Sum class from "Input and Output Dictionaries" section
const [sceneObject] = await sdk.Scene.createObjects(1);
const node = sceneObject.addNode();
const sumComponent = node.addComponent('sum');

class SumSpy implements MpSdk.Scene.ISceneObjectSpy {
  readonly path = sumPath;
  onEvent(data) {
    console.log('spied a change to outputs.sum. New sum:', data);
  }
}

class AddendSpy implements MpSdk.Scene.ISceneObjectSpy {
  readonly path = addendPath;
  onEvent(data) {
    console.log('spied change to inputs.addend. New addend value:', data);
  }
}

// create the output path
const sumPath = sceneObject.addOutputPath(sumComponent, 'sum');
// create the input path
const addendPath = sceneObject.addInputPath(sumComponent, 'addend');

// attach spies
const sumSubscription = constsceneObject.spyOnEvent(new SumSpy());
const addendSubscription = sceneObject.spyOnEvent(new AddendSpy());

node.start();

// making a change to the "Sum" component's `inputs.augend` will recompute its `output.sum` which will trigger the SumSpy's `onEvent` with the new sum value
sumComponent.inputs.augend = 1;

// making an input change is possible through paths
addendPath.set(4); // will trigger the AddendSpy's `onEvent`

// after the Sum component updates its `outputs.sum`
console.log(sumPath.get()); // will have a value of 5 (augend: 1 + addend: 4)

// stop spying on the input changes
addendSubscription.cancel();

// stop spying on the output changes
sumSubscription.cancel();