Angular & Babylon.js

// import jádra Angularu
import { Component } from '@angular/core';

// konstanty pro moduly načítané pomocí tagu script
declare const MW: any;
declare const BABYLON: any;
declare const setupScene: any;
declare const MAP: any;

// decorator Angular komponentu
@Component({
  selector: 'app1',
  templateUrl: './app1.component.html' // URL šablony
})
// třída Angular komponentu
export class App1Component {
  data = {};

  // metoda pro inicializaci komponentu
  ngOnInit() {
    var scene = setupScene("canvas1"); // vytvoření scény
    var data = {};

    // rovina pro text jako dynmaickou texturu
    var textPlane = new BABYLON.Mesh.CreatePlane("planeForText", 20, scene);
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(textPlane, 2048, 2048);

    // text blok
    var text = new BABYLON.GUI.TextBlock();
    text.fontSize = 200;
    text.outlineWidth = 5;

    // obousměrné mapování mezi 3D objektem a datovým objektem 
    new MW.TwoWayMap({
        end1: data,
        map1: MAP.TEXT.to3DModel,
        end2: text,
        map2: MAP.TEXT.toDataModel,
        data1: {
            text: 'Hello world!',
            diffuseColor: '#dd3300',
            outlineColor: '#ee9966',
        }
    });

    advancedTexture.addControl(text);
    this.data = data;
  }
}

<div class="fixed-ratio">
    <!-- Plátno pro scénu -->
    <canvas id="canvas1" "></canvas>
</div>
<div>
    <!-- Formulář pro ovládání scény -->
    <form>
        <div>
            <label>Text</label>
            <div>
              <!-- Vstup pro text s obousměrným data-bindingem [(ngModel)] -->
              <input name="text" type="text" [(ngModel)]="text" />
            </div>
        </div>
        <div>
            <div class="grid">
                <div>
                    <label>Základní barva</label>
                    <div>
                        <input name="diffuse" type="color" [(ngModel)]="diffuseColor" />
                        <span [ngStyle]="{'color': diffuseColor }"> {{ diffuseColor }} </span>
                    </div>
                </div>
                <div>
                    <label>Barva lesku</label>
                    <div>
                        <input name="specular" type="color" [(ngModel)]="specularColor" />
                        <span [ngStyle]="{'color': specularColor }"> {{ specularColor }} </span>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { App1Component } from './app1.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ App1Component ],
  bootstrap:    [ App1Component ],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

// import jádra Angularu
import { Component } from '@angular/core';
    
// konstanty pro moduly načítané pomocí tagu script
declare const MW: any;
declare const BABYLON: any;
declare const setupScene: any;
declare const MAP: any;

// decorator Angular komponentu
@Component({ 
  selector: 'app2',
  templateUrl: './app2.component.html'
})
// třída Angular komponentu
export class App2Component {
  items = [];
  scene;
  group;

  // vytvoření scény při inicializaci komponentu
  ngOnInit() { 
    this.scene = setupScene("canvas2");
    this.group = new BABYLON.AbstractMesh("group", this.scene);
    this.add();
    this.add();
  }

  // metoda pro vytvoření kostky
  createCube(index) {
    var data = {};

    // mesh kostky
    var material = new BABYLON.StandardMaterial("material" + index, this.scene);
    var cube = new BABYLON.Mesh.CreateBox("box" + index, 1, this.scene);
    cube.material = material;
    this.group.addChild(cube);

    // obousměrné mapování mezi 3D objektem a datovým objektem 
    new MW.TwoWayMap({
        end1: data,
        map1: MAP.CUBE.to3DModel,
        end2: cube,
        map2: MAP.CUBE.toDataModel,
        data1: {
            color: "#ff9900", // nebo jiná náhodná barva
            element: cube,
            index: index,
            size: { x: 1, y: 1, z: 1 },
            position: { x: 0, y: 0, z: 0 },
        }
    });
    
    // relativní pozice kostky
    this.group.position.x = - index;
    cube.position.x = index * 2;
    return data;
  }

  // metoda pro přidání kostky
  add() {
    this.items.push(this.createCube(this.items.length));
  }

  // metoda pro smazání kostky
  remove(index) {
    var mesh = this.items[index].element;
    this.group.removeChild(mesh);
    this.scene.removeMesh(mesh);
    this.items.splice(index, 1);
    // přepočet pozice a indexu u dalších kostek
    for (var i = index; i < this.items.length; i++) {
        var oldX = this.items[i].position.x;
        this.items[i].index = i;
        this.items[i].element.position.x = this.items[i].element.position.x - 2;
    }
    this.group.position.x = - (this.items.length - 1);
  }
}

<div class="fixed-ratio">
    <!-- Plátno pro scénu -->
    <canvas id="canvas2" "></canvas>
</div>
<div>
    <!-- Formulář pro ovládání scény -->
    <form>
        <ul>
            <!-- Cyklus s využitím directivy *ngFor pro ovládací panely ke všem kostkám -->
            <li *ngFor="let item of items; index as index">
                <div>
                    <div class="grid">
                        <div>
                            <label>Objekt #{{index + 1}}</label>
                            <div>
                                <input type="color" [(ngModel)]="item.color" name="color {{ index }}" />
                                <span [ngStyle]="{'color': item.color }"> {{ item.color }} </span>
                            </div>
                        </div>
                        <div>
                            <div class="grid">
                                <div>
                                    <label>↔ W {{ item.size.x * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.x" min="0.1" max="2" step="0.1" name="w{{ index }}" />
                                </div>
                                <div>
                                    <label>↕ H {{ item.size.y * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.y" min="0.1" max="2" step="0.1" name="h{{ index }}" />
                                </div>
                                <div>
                                    <label>⤢ L {{ item.size.z * 100 }}%</label>
                                    <input type="range" [(ngModel)]="item.size.z" min="0.1" max="2" step="0.1" name="l{{ index }}" />
                                </div>
                                <div>
                                    <label>→ X {{ item.position.x }}</label>
                                     <input type="range" [(ngModel)]="item.position.x" min="-1" max="1" step="0.1" name="x{{ index }}" />
                                </div>
                                <div>
                                    <label>↑ Y {{ item.position.y }}</label>
                                    <input type="range" [(ngModel)]="item.position.y" min="-1" max="1" step="0.1" name="y{{ index }}" />
                                </div>
                                <div>
                                    <label>↗ Z {{ item.position.z }}</label>
                                    <input type="range" [(ngModel)]="item.position.z" min="-1" max="1" step="0.1" name="z{{ index }}" />
                                </div>
                            </div>
                        </div>
                        <div>
                            <!-- Tlačítko napojené na metodu pro smazání kostky -->
                            <a (click)="remove(index)">Smazat</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- Tlačítko napojené na metodu pro přidání kostky -->
        <a (click)="add()">Přidat nový objekt</a>
    </form>
</div>

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { App2Component } from './app2.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ App2Component ],
  bootstrap:    [ App2Component ],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }