{NetworkConfigurationComponent} BaseClass for the connection to the remote custom server.

Hierarchy

  • Component
    • NetworkConfigurationComponent

Properties

audio: boolean = false
connecting: boolean = false
debug: boolean = false
discord: boolean = false
inputDeviceId?: string
playerMaterial: null | Material = null
playerMesh: null | Mesh = null
playerObject: null | Object3D = null
remoteUsers: Map<string, Object3DReference> = ...
secure: boolean = true
serverHost: string = 'localhost'
serverPath: string = ''
serverPort: number = 443
skipServerStart: boolean = false

Special property to skip sending server start signal, this is only usable for local server development, as otherwise there is no guarantee that your server will run

InheritProperties?: boolean

When set to true, the child class inherits from the parent properties, as shown in the following example:

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

class Parent extends Component {
static TypeName = 'parent';
static Properties = {parentName: Property.string('parent')}
}

class Child extends Parent {
static TypeName = 'child';
static Properties = {name: Property.string('child')}
static InheritProperties = true;

start() {
// Works because `InheritProperties` is `true`.
console.log(`${this.name} inherits from ${this.parentName}`);
}
}

Note

Properties defined in descendant classes will override properties with the same name defined in ancestor classes.

Defaults to true.

Properties: Record<string, ComponentProperty>

Properties of this component class.

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

Example:

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:

// 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;

References

Reference types (i.e., mesh, object, etc...) can also be listed as required:

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

class MyComponent extends Component {
static Properties = {
myObject: Property.object({required: true}),
myAnimation: Property.animation({required: true}),
myTexture: Property.texture({required: true}),
myMesh: Property.mesh({required: true}),
}
}

Please note that references are validated once before the call to Component.start only, via the Component.validateProperties method.

TypeName: string = 'network-configuration'

Accessors

  • get active(): boolean
  • true if the component is marked as active and its scene is active.

    Returns boolean

  • set active(active): void
  • Set whether this component is active.

    Activating/deactivating a component comes at a small cost of reordering components in the respective component manager. This function therefore is not a trivial assignment.

    Does nothing if the component is already activated/deactivated.

    Parameters

    • active: boolean

      New active state.

    Returns void

  • get engine(): WonderlandEngine
  • Hosting engine instance.

    Returns WonderlandEngine

  • get isDestroyed(): boolean
  • true if the component is destroyed, false otherwise.

    If WonderlandEngine.erasePrototypeOnDestroy is true, reading a custom property will not work:

    engine.erasePrototypeOnDestroy = true;

    const comp = obj.addComponent('mesh');
    comp.customParam = 'Hello World!';

    console.log(comp.isDestroyed); // Prints `false`
    comp.destroy();
    console.log(comp.isDestroyed); // Prints `true`
    console.log(comp.customParam); // Throws an error

    Returns boolean

    Since

    1.1.1

  • get markedActive(): boolean
  • true if the component is marked as active in the scene, false otherwise.

    Returns boolean

    Note

    At the opposite of Component.active, this accessor doesn't take into account whether the scene is active or not.

  • get object(): Object3D
  • The object this component is attached to.

    Returns Object3D

  • get scene(): Prefab
  • Scene this component is part of.

    Returns Prefab

  • get type(): string
  • The name of this component's type

    Returns string

Methods

  • Copy all the properties from src into this instance.

    Parameters

    • src: Record<string, any>

      The source component to copy from.

    Returns NetworkConfigurationComponent

    Reference to self (for method chaining).

    Note

    Only properties are copied. If a component needs to copy extra data, it needs to override this method.

    Example

    class MyComponent extends Component {
    nonPropertyData = 'Hello World';

    copy(src) {
    super.copy(src);
    this.nonPropertyData = src.nonPropertyData;
    return this;
    }
    }

    Note

    This method is called by Object3D.clone. Do not attempt to: - Create new component - Read references to other objects

    When cloning via Object3D.clone, this method will be called before Component.start.

    Note

    JavaScript component properties aren't retargeted. Thus, references inside the source object will not be retargeted to the destination object, at the exception of the skin data on MeshComponent and AnimationComponent.

  • 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.

       c.destroy();
    c = null;

    Returns void

    Since

    0.9.0

  • Checks equality by comparing ids and not the JavaScript reference.

    Parameters

    • otherComponent: undefined | null | Component

    Returns boolean

    Deprecate

    Use JavaScript reference comparison instead:

    const componentA = obj.addComponent('mesh');
    const componentB = obj.addComponent('mesh');
    const componentC = componentB;
    console.log(componentA === componentB); // false
    console.log(componentA === componentA); // true
    console.log(componentB === componentC); // true
  • Triggered when the component goes from an inactive state to an active state.

    Returns void

    Note

    When using (WonderlandEngine.switchTo), all the components that were previously active will trigger this method.

    Note

    You can manually activate or deactivate a component using: :setter.

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

    Returns void

    Note

    When using (WonderlandEngine.switchTo), the components of the scene getting deactivated will trigger this method.

    Note

    You can manually activate or deactivate a component using: :setter.

  • Triggered when the component is removed from its object. For more information, please have a look at Component.onDestroy.

    Returns void

    Note

    This method will not be triggered for inactive scene being destroyed.

    Since

    0.9.0

  • Handler function, to handle custom sent events from the custom server implementation. Contains default implementations for the user-joined and user-leave events, which will help you with the default functionality implementation. Usually you would overwrite this function on the extending class of your network manager instance and call this method with super.onEvent(e)and then implement additional logic.

    For example:

    onEvent(e: WonderlandWebsocketEvent) {
    super.onEvent(e);
    switch(e.type){
    case: 'custom-event':
    //do your custom event handling here
    break;
    default:
    break;
    }
    }

    Returns void

  • Will be called once a successful connection could be made to the custom user server implementation. The joinEvent will contain the networkIds with the user owned objects. For example, if you onUserJoin function looks like this:


    onUserJoin(e: JoinEvent) {
    // custom join data, send in the connect function above
    const customJoinData = e.data;

    e.transforms = new Float32Array(8 * 1);
    // Initialize dual quaternions
    for (let i = 0; i < 1; ++i) {
    e.transforms[i * 8 + 3] = 1;
    }

    const user = super.onUserJoin(e);

    return user:
    }

    The returned user.objects will contain the networkId for your newly created transforms array.

    Parameters

    • joinEvent: number[]

      {number[]}

    Returns void

  • Reset the component properties to default.

    Returns NetworkConfigurationComponent

    Reference to self (for method chaining).

    Note

    This is automatically called during the component instantiation.

  • Returns string

  • Triggered every frame by the runtime.

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

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

    Parameters

    • delta: number

      Elapsed time between this frame and the previous one, in seconds.

    Returns void

  • Validate the properties on this instance.

    Returns void

    Throws

    If any of the required properties isn't initialized on this instance.

Generated using TypeDoc