InputComponent

InputComponent 

Native input component.

Provides access to a native input component instance.

• InputComponent
  • .InputComponent.Properties: Record<string, ComponentProperty>
  • .InputComponent.TypeName: string
  • .InputComponent.onRegister: (engine: WonderlandEngine) ⇒ void
  • .active
  • .active
  • .engine
  • .handedness
  • .inputType
  • .inputType
  • .object
  • .type
  • .xrInputSource
  • .destroy() ⇒ void
  • .equals(otherComponent) ⇒ boolean
  • .init() ⇒ void
  • .onActivate() ⇒ void
  • .onDeactivate() ⇒ void
  • .onDestroy() ⇒ void
  • .start() ⇒ void
  • .update(delta) ⇒ void

.Properties: Record<string, ComponentProperty> 

Properties of this component class.

Properties are public attributes that can be configured via the Wonderland Editor.

Example:

1
2
3
4
5
6
7
8
9

import { Component, Type } from '@wonderlandengine/api';
class MyComponent extends Component {
    static TypeName = 'my-component';
    static Properties = {
        myBoolean: { type: Type.Boolean, default: false },
        myFloat: { type: Type.Float, default: false },
        myTexture: { type: Type.Texture, default: null },
    };
}

Properties are automatically added to each component instance, and are accessible like any JS attribute:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// Creates a new component and set each properties value:
const myComponent = object.addComponent(MyComponent, {
    myBoolean: true,
    myFloat: 42.0,
    myTexture: null
});

// You can also override the properties on the instance:
myComponent.myBoolean = false;
myComponent.myFloat = -42.0;

.TypeName: string 

.onRegister: (engine: WonderlandEngine) ⇒ void 

Called when this component class is registered.

Example: This callback can be used to register dependencies of a component, e.g., component classes that need to be registered in order to add them at runtime with addComponent, independent of whether they are used in the editor.

1
2
3
4
5
6
7
8
9

class Spawner extends Component {
    static TypeName = 'spawner';

    static onRegister() {
        engine.registerComponent(SpawnedComponent);
    }

    // You can now use addComponent with SpawnedComponent
}

Example: This callback can be used to register different implementations of a component depending on client features or API versions.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Properties need to be the same for all implementations!
const SharedProperties = {};

class Anchor extends Component {
    static TypeName = 'spawner';
    static Properties = SharedProperties;

    static onRegister() {
        if(navigator.xr === undefined) {
            /* WebXR unsupported, keep this dummy component */
            return;
        }
        /* WebXR supported! Override already registered dummy implementation
         * with one depending on hit-test API support */
        engine.registerComponent(window.HitTestSource === undefined ?
            AnchorWithoutHitTest : AnchorWithHitTest);
    }

    // This one implements no functions
}

.active 

Whether this component is active

.active 

Whether this component is active

.engine 

Hosting engine instance.

.handedness 

’left’, ‘right’ or null depending on the inputType.

.inputType 

Input component type

.inputType 

Input component type

.object 

The object this component is attached to.

.type 

The name of this component’s type

.xrInputSource 

WebXR Device API input source associated with this input component, if type ControllerLeft or ControllerRight.

.destroy() ⇒ void 

Remove this component from its objects and destroy it.

It is best practice to set the component to null after, to ensure it does not get used later.

1
2

   c.destroy();
   c = null;

.equals(otherComponent: undefined | null | Component) ⇒ boolean 

Checks equality by comparing whether the wrapped native component ids and component manager types are equal.

Returns: Whether this component equals the given component.

.init() ⇒ void 

Triggered when the component is initialized by the runtime. This method will only be triggered once after instantiation.

.onActivate() ⇒ void 

Triggered when the component goes from an inactive state to an active state.

Note: You can manually activate or deactivate a component using: active.

.onDeactivate() ⇒ void 

Triggered when the component goes from an activated state to an inactive state.

Note: You can manually activate or deactivate a component using: active.

.onDestroy() ⇒ void 

Triggered when the component is removed from its object.

Note: You can remove a component using: destroy.

.start() ⇒ void 

Triggered when the component is started by the runtime, or activated.

You can use that to re-initialize the state of the component.

.update(delta: number) ⇒ void 

Triggered every frame by the runtime.

You should perform your business logic in this method. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import { Component, Type } from '@wonderlandengine/api';

class TranslateForwardComponent extends Component {
    static TypeName = 'translate-forward-component';
    static Properties = {
        speed: { type: Type.Float, default: 1.0 }
    };
    constructor() {
        this._forward = new Float32Array([0, 0, 0]);
    }
    update(dt) {
        this.object.getForward(this._forward);
        this._forward[0] *= this.speed;
        this._forward[1] *= this.speed;
        this._forward[2] *= this.speed;
        this.object.translate(this._forward);
    }
}