Angular & X3Dom

<div>
    <!-- X3Dom scéna -->
	<x3d>
		<scene>
			<shape>
				<appearance>
                    <!-- Materiál s data-bindingem pro barvy -->
					<material [diffusecolor]="diffuseColor" [specularcolor]="specularColor"></material>
				</appearance>
                <!-- Text mesh s data-bindingem do atributu string -->
				<text solid="false" [string]="text">
					<fontstyle family="TYPEWRITER" justify="MIDDLE" quality="200" size="2"></fontstyle>
				</text>
			</shape>
		</scene>
	</x3d>
</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 { Component } from '@angular/core'; // import jádra Angularu

@Component({ // decorator Angular komponentu
  selector: 'app1',
  templateUrl: './app1.component.html' // URL šablony
})
export class App1Component { // třída Angular komponentu
  text = 'Hello world';
  diffuseColor = '#dd3300';
  specularColor = '#ee9966';

  ngOnInit() { // přenačtení X3Dom při inicializaci komponentu
    if (window['x3dom']) { window['x3dom'].reload(); }
  }
}

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 { }

<div>
    <!-- X3Dom scéna -->
    <x3d>
        <scene>
            <!-- Cyklus s využitím directivy *ngFor pro vykreslení všech kostek -->
            <group *ngFor="let item of items; index as index">
                <!-- Pozicování kostky -->
                <transform translation="{{ ((index - ((items.length - 1) / 2)) * 2) + ' 0 0' }}">
                    <transform translation="{{ item.position.x + ' ' + item.position.y + ' ' + item.position.z }}">
                        <!-- Vytvoření kostky s data-bindingem do jejího atributu size a atributu diffuseColor materiálu -->
                        <shape>
                            <appearance>
                                <material [diffuseColor]="item.color"></material>
                            </appearance>
                            <box size="{{ item.size.x + ' ' + item.size.y + ' ' + item.size.z }}" useGeoCache="false"></box>
                        </shape>
                    </transform>
                </transform>
            </group>
        </scene>
    </x3d>
</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 { Component } from '@angular/core'; // import jádra Angularu

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

  add() { // metoda pro přidání kostky
    this.items.push({
        size: { x: 1, y: 1, z: 1 },
        position: { x: 0, y: 0, z: 0 },
        color: "#ff9900" // nebo jiná náhodná barva
    });
  }

  remove(index) { // metoda pro smazání kostky
    this.items.splice(index, 1);
  }

  ngOnInit() { // metoda volaná při inicializaci
    this.add();
    this.add();
    if (window['x3dom']) { window['x3dom'].reload(); } // přenačtení X3Dom
  }
}

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 { }