Ändern von Materialeigenschaften zur Laufzeit

Du kannst alle Materialeigenschaften, die du im Editor findest, auch zur Laufzeit ändern. Dies könnte das Wechseln der Textur für ein Daumenkino sein, das Hervorheben eines Objekts zur Anzeige von Interaktivität oder einfach die Animation der Spiegelung basierend auf Wetterbedingungen.

In der Wonderland Engine kannst du ein Material, das von einer Mesh-Komponente verwendet wird, abrufen, indem du die Komponente mit Object3D.getComponent holst oder einen Parameter für deine benutzerdefinierte Komponente mit dem Typ Property.material() angibst.

Ändern von Materialeigenschaften

Das Ändern von Materialeigenschaften erfolgt über generierte Setter/Getter im Material-Typ.

material.setDiffuseColor([1, 1, 0, 1]); /* R, G, B, A */
material.setSpecularity(2);
material.setDiffuseTexture(someTexture);

Jede Eigenschaft, die im Materialeigenschafts-Panel festgelegt werden kann, kann hier gesetzt werden.

Beispiel: Fade-Komponente

Das folgende Beispiel animiert den Alpha-Wert des Materials basierend auf der Zeit. Dies könnte als Einblendeffekt für ein Objekt verwendet werden.

Beachte, dass jedes Objekt, das das auf die Mesh-Komponente gesetzte Material verwendet, von der Animation betroffen wird. Um die Animation für das Objekt einzigartig zu machen, verwendet die Komponente Material.clone, um eine einzigartige Instanz zu erhalten und diese auf das Mesh zu setzen.

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

export class FadeIn extends Component {
    static TypeName = 'fade-in';
    static Properties = {
        /* Fadedauer in Sekunden */
        duration: Property.float(2.0),
        /* Start-Alpha-Wert */
        startAlpha: Property.float(2.0),
        /* End-Alpha-Wert */
        endAlpha: Property.float(2.0),
    };

    start() {
        /* Material von der an dieses Objekt angehängten Mesh-Komponente abrufen */
        const mesh = this.object.getComponent('mesh');
        if (!mesh) throw new Error('Fehlende Mesh-Komponente am Objekt.');
        /* Sicherstellen, dass wir nicht versehentlich andere Objekte ändern, die dasselbe
         * Material verwenden */
        this.material = mesh.material.clone();
        mesh.material = this.material;
    }

    onActivate() {
        this.alpha = 1.0;
        this.time = 0;
    }

    update(dt) {
        this.time += dt;

        this.alpha =
            this.startAlpha +
            (this.endAlpha - this.startAlpha) * Math.min(1.0, this.time / this.duration);
        /* Kein Aufruf von update() mehr nötig, nachdem endAlpha erreicht wurde */
        if (this.alpha == this.endAlpha) this.active = false;

        /* Setze den Alpha-Wert der Diffuse-Farbe. Bei anderen Materialien musst du möglicherweise eine
         * andere Eigenschaft ändern */
        const c = this.material.getDiffuseColor();
        this.material.setDiffuseColor([c[0], c[1], c[2], this.alpha]);
    }
}

Beachte, dass die Materialeigenschaften, wie hier diffuseColor, vom verwendeten Pipeline und Shader abhängen. Du möchtest möglicherweise flatColor für “Flat Opaque” anpassen oder etwas völlig anderes für benutzerdefinierte Shader.

Jede Eigenschaft, die im Materialeigenschafts-Panel für das Material angezeigt wird, kann auf diese Weise bearbeitet werden.